关于angular：Bootstrap Navbar无法正常工作：Angular CLI


Bootstrap Navbar not working correctly: AngularCLI

我在我的angularcli项目中包含了引导程序，但是当我尝试包含导航栏时，所有元素都无法正常工作。我正在使用网站上的标准boostrap navbar示例，但看起来很奇怪：

enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  Navbar

 
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        Home <span class="sr-only">(current)</span>
     
</li>

      <li class="nav-item">
        Link
     
</li>

      <li class="nav-item">
        Disabled
     
</li>

   
</ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
 
</nav>

.angular-cli.json

1
2
3
4
"styles": [
       "../node_modules/bootstrap/dist/css/bootstrap.min.css",
       "styles.css"
      ],

下面的代码显示了如何使用ng-bootstrap和Bootstrap 4在Angular中实现导航栏。您可以在此插件中看到它。

  • ng-bootstrap库是为Angular开发的，不需要jQuery
  • 使用Bootstrap 4，应将navbar-toggleable-md替换为navbar-expand-md
  • ngbCollapse指令用于显示/隐藏下拉菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  Navbar
 
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        Home <span class="sr-only">(current)</span>
     
</li>

      <li class="nav-item">
        Link
     
</li>

      <li class="nav-item">
        Disabled
     
</li>

   
</ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
 
</nav>
相关讨论

引导4中存在一些已知问题，尤其是在导航栏实现中

因此您必须安装引导程序[email protected]

如果您使用的是npm，则最好重新建议以下库

1
2
3
 npm install [email protected] --save

npm install [email protected] tether jquery --save

在.angular-cli.json文件中添加依赖项

1
2
3
4
5
6
7
8
9
10
"styles":[
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],

"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],

使用以下HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 <nav class="navbarnavbar-inverse">
   
   
    <button type="button" class="navbar-togglecollapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Togglenavigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    Angular5Website
   
   
    <ul class="navnavbar-nav">
    <li class="active"> Home
</li>

   
<li>
About
</li>

   
<li>
Contact
</li>

   
</ul>

    <!--/.nav-collapse-->
   
    </nav>
相关讨论

navbar.component.html：

1
2
3
4
5
6
7
8
9
10
11
12
<nav class="navbar navbar-default">
   
     
         <button type="button" class="navbar-toggle" (click)="toggleNavbarCollapsing()">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         Navbar
     
     
      ...

navbar.component.ts：

1
2
3
4
5
navbarCollapsed = true;

toggleNavbarCollapsing() {
    this.navbarCollapsed = !this.navbarCollapsed;
}