Angular 14切换菜单不工作/ bootstrap 4.6

我正在用Angular 14设计一个主页。我添加到标题部分的菜单无法打开。当我在互联网上获得菜单示例并在我的项目中尝试时，它们不起作用。我的项目武器如下。你能帮帮我吗？当我将作为html工作的代码添加到项目中时，它不起作用。我不知道是什么挡住了它的Angular 。

版本

"popper.js": "1.16.1",
"bootstrap": "4.6.1",

index.html

<!doctype html>
    <html>
    
<head>
  <base href='/'>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/icon.png" />
  <link rel="icon" type="image/png" href="./assets/img/icon.png" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <meta name="viewport" content="width=device-width" />

  <!--     Fonts and icons     -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet'
    type='text/css'>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>
  <script>window.global = window;</script>
</head>

<body>
  <app-root>
    <div class="loader">
      <svg class="circular" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
      </svg>
    </div>

    <div>Loading...</div>
  </app-root>
</body>

</html>

angular.json

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
          "src/assets/scss/material-dashboard.scss",
          "src/assets/css/demo.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/popper.js/dist/umd/popper.js",
          "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
          "node_modules/arrive/src/arrive.js",
          "node_modules/moment/moment.js",
          "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
          "node_modules/bootstrap-notify/bootstrap-notify.js",
          "node_modules/chartist/dist/chartist.js"
        ],

home_page.component.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet'
        type='text/css'>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
        crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body>

    <header id="index-header">

        <div class="container ">
            <nav class="navbar navbar-expand-lg navbar-light ">
                <div class="brand-left-side d-flex">
                    <div style="margin-top:25px;">
                        <p>LOGO</p>
                    </div>
                </div>

                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <i class="material-icons">menu</i>
                </button>

                <div class="collapse navbar-collapse " id="navbarSupportedContent">
                    <ul class="navbar-nav topnav ml-auto">

                        <li class="nav-item">
                            <a class="nav-link" href="#jobs">HOME</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link btn btn-style2 text-white" type="button" href="javascript:void(0)"
                                (click)="navigateLogin()" data-toggle="modal" data-target="#myModal">LOGIN</a>
                        </li>

                    </ul>
                </div>
            </nav>
        </div>

    </header>

</body>

</html>

看起来你是在将jQuery和Bootstrap的纯JS与Angular结合起来。这也是不好的做法，因为jQuery和Bootstrap会直接操作你的HTML，而不会让Angular知道。永远不要在Angular项目中包含或使用jQuery（除非你有很好的理由并且确切地知道你在做什么），因为它只会导致这样的问题。
你需要做的是：
1.)修复您的home_page.component.html模板，使其仅包含模板HTML。它不应该包含<head>或<body>，因为它只是一个组件的模板，而不是一个完整的HTML文档。它应该看起来更像这样：

<header id="index-header">
    <div class="container ">
        <nav class="navbar navbar-expand-lg navbar-light ">
            <div class="brand-left-side d-flex">
                <div style="margin-top:25px;">
                    <p>LOGO</p>
                </div>
            </div>

            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="material-icons">menu</i>
            </button>

            <div class="collapse navbar-collapse " id="navbarSupportedContent">
                <ul class="navbar-nav topnav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#jobs">HOME</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-style2 text-white" type="button" href="javascript:void(0)"
                            (click)="navigateLogin()" data-toggle="modal" data-target="#myModal">LOGIN</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</header>

2.)删除jQuery和Bootstrap相关的JavaScript文件。不要在Angular中使用这些

"node_modules/jquery/dist/jquery.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
"node_modules/bootstrap-notify/bootstrap-notify.js",

3.)使用专门为Angular设计的Bootstrap模块。你有几个选择：

因为它看起来像你正在使用材料设计与Bootstrap，我建议你看看第三个列出
这里要记住的主要事情是，对于一个Angular项目，你必须以“Angular的方式”做事--你不能只是拉入任何旧的jQuery插件，并期望它像在非angular网站上一样工作。Angular需要完全控制您的Web应用程序，并且需要了解所有更改。如果你开始使用jQuery，那么Angular不知道发生了什么，并且绝对会有像你正在经历的冲突。

Angular 14切换菜单不工作/ bootstrap 4.6

1条答案

相关问题

热门标签

最新问答