Question

我正在学习Angular和bootstrap。为了结合这些，我尝试将一些工作的html内容复制到Angular组件。但是，某些功能还没有奏效。当我点击汉堡包菜单图标时，没有任何内容被切换，导航栏项目也没有显示。这个＆＃39;数据切换＆＃39;功能似乎与jquery一起使用，所以我也尝试为此导入脚本。

这里的代码包含＆＃39;数据转换器＆＃39;：

<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>

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

Answer 1

在不考虑太多细节的情况下，我强烈建议您不要将Angular与jQuery混合使用。这是所有public static List<int[]> Parse(List<string> list) { if (list == null) { throw new ArgumentNullException(nameof(list)); } var arrayOfStringArray = list .Select(x => x.Split(';')) .ToArray(); var resultList = new List<int[]>(); for (var i = 0; i < arrayOfStringArray.Length; i++) { var arrayOfString = arrayOfStringArray[i]; if (arrayOfString.Length != 3) { throw new InvalidOperationException("meaningfull message there!"); } var arrayOfInt = new int[3]; for (var j = 0; j < arrayOfInt.Length; j++) { arrayOfInt[j] = TryParse(arrayOfString[j], i, j); } resultList.Add(arrayOfInt); } return resultList; } static int TryParse(string value, int line, int position) { int result; if (!int.TryParse(value, out result)) { throw new FormatException($"Item at position {line},{position} is invalid."); } return result; }开始......

You can either use material构建此类导航或使用Bootstrap components written in pure AngularJS by the AngularUI Team。如果你对其他两个人不满意，还有Semantic UI Angular Integrations Repository。

汉堡菜单项目未显示Angular中的数据切换

1 个答案: