汉堡菜单项未显示为Angular的数据可笑

我正在学习角和引导程序。为了结合使用，我尝试将一些工作的HTML内容复制到角度组件。但是，某些功能尚不正常。当我单击"汉堡菜单"图标时，没有切换任何内容，并且没有显示导航栏项目。这种"数据障碍"功能似乎与jQuery一起使用，因此我也尝试为此导入脚本。

在这里，带有" data-toggler"的代码：

<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navigation"> &#9776; </button>
<div class="collapse navbar-toggleable-xs" id="navigation"> ... </div>

下面我尝试导入jQuery脚本;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>

这是整个组件：

app.component.html

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
   <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,700' rel='stylesheet' type='text/css'>
  </head>
<body>
  <nav class="navbar navbar-fixed-top">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navigation">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="navigation">
    <ul class="nav navbar-nav float-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#social">CONNECT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#who">WHO</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#work">WORK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#why">WHY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#customers">CUSTOMERS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#pricing">PRICING</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>

有人知道为什么按下按钮时未显示列表项目？

而不会过多细节，我强烈建议您不要将角度与jQuery混合。这是所有messing things up启动。

您可以使用材料来构建这种导航，也可以使用Angularui团队用纯AngularJS编写的Bootstrap组件。还有一个语义UI角度集成存储库如果您对其他两个不满意。

相关内容

最新更新

热门标签：