Twitter bootstrap Can'；t以角度切换引导4中的导航栏

为什么在angular 4中使用bootstrap 4调整到移动屏幕时无法切换导航栏。我将它包括在脚本和样式中的angular cli中，这些是来自引导的节点模块。我的代码中缺少什么吗？请在下面查看。有什么不对劲吗？请帮忙

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Dashboard</a>
  <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

package.json

      {
  "name": "dashboard2",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.5",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.7",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

---

@Joseph，看起来您还没有安装引导依赖项（以及引导本身），以使导航栏切换正常工作

如果打开终端或命令行并导航到包含

package.json

文件的目录，请运行以下命令：

npm install --save jquery
npm install --save popper.js
npm install --save bootstrap@4.0.0-beta

这些命令将为您的项目安装必要的依赖项。他们在做什么方面相当明确，但是如果您需要更新他们在做什么或如何工作，我建议您查看

npm install

的文档

---

安装后，您需要确保将它们包含在.angular-cli.json文件中，以便angular应用程序可以使用它们。

看起来您可能一直在从引导中查看示例。我有，也有同样的问题

问题是它不是一个角度的例子，所以它不起作用。要使其工作，必须使用

（单击）

事件和变量。因此，将模板更改为

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Dashboard</a>
  <button class="navbar-toggler d-lg-none" type="button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarsExampleDefault" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault" [ngbCollapse]="isCollapsed">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

---

此示例提供汉堡图标的切换功能（换句话说，如果在响应模式下运行整个导航栏），以及下拉菜单项的切换

它使用ng引导，但我更愿意使用本机引导navbar支持，而不是使用“hacks”

显然，其他人也在为同样的问题而挣扎：

如果您想使用Bootstrap 4而不使用@ng Bootstrap，请参阅本git repo中的代码：

---

我在这件事上浪费了太多时间。你必须破解Angular才能让它工作；这不仅仅是版本不正确等问题。

如前所述，您需要一个属性（例如，最初为false的isShown） 然后使用

[ngClass]="{ 'show': isShown }" 

这里

主页（当前）


接触


铭刻

要使切换在角度上工作，您只需做4件事

安装发动机增压器

将切换单击侦听器添加到导航栏开关

（单击）=“isCollapsed=！isCollapsed”

使用属性绑定到扩展的aria，

[attr.aria expanded]=“！isCollapsed”

因此，当您单击时，该属性将被更改（true或false）

同样的方法使用属性绑定到ngCollapse

[ngbCollapse]=“isCollapsed”

注意：不建议使用JQuery

这对我来说很有效

现在我们可以在angular 4中使用bootstrap 4调整到移动屏幕时切换导航栏

试试这个代码

app.component.html

<nav class="navbar navbar-expand-lg justify-content-between">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="navButton">
    <i class="fa fa-bars"></i>
  </button>
  <div class="row">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item" *ngFor="let menu of mainmenu, let i = index">
          <a class="nav-link" (click)="findIndex(i)" routerLink="/{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
          <ng-container *ngIf="menu.children && menu.children.length > 0">
            <span class="d-block d-sm-none"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </ng-container>
          <ul class="sub_menu dropdown-menu" [ngClass]="{active : isActive(i)}" *ngIf="menu.children && menu.children.length > 0">
            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" routerLink="/{{sub_menu.href}}" (click)="closeMenu()"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

---

我不知道这是否仍然相关，但当我遇到这个问题时，帮助我的是停止live server，然后重新编译应用程序并使用ng serve重新启动它。有时，当您在服务器运行时安装依赖项时，angular.json不会看到依赖项，即使您插入了它们。如果有人正在寻找一种动态切换导航栏的方法，那么对于未来的用户来说可能是

可以与模板变量一起使用以获取对按钮的引用，然后可以触发click事件：

HTML

<button #menu class="navbar-toggler d-lg-none" type="button"
    data-toggle="collapse" data-target="#navbarsExampleDefault"
    aria-controls="navbarsExampleDefault" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

---

我知道这不是这个问题的答案，但它非常相关，可能会有帮助

Bootstrap-4.4.1，Angular cli:7.3.9

最简单的方法是在客户端入口点导入js包：

---

导入“bootstrap/dist/js/bootstrap.bundle”；“polyfills.ts”文件中的行

它工作得非常好尝试一下这个

相应的ts文件是

从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
})
导出类AppComponent{
//标题='WebApp'；
isShown=假；
}

如何在angular应用程序中包含依赖项？@cwanjt。你能再次检查我的angular cli吗？我只安装了npm安装--savebootstrap@4.0.0-它成功了吗？如果成功了，那就太好了，而且您仍然需要项目中的另外两个，因为引导依赖于它们。您还需要将它们添加到.angular-cli.json文件中。在.angular-cli.json脚本中，添加bootstrap.min.js的路径这对我不起作用，因为我没有安装popper.js。谢谢你。请注意，我的安装是“npm安装——保存popper.js”，而不是“popperjs”。根据前面的评论，答案应该编辑为显示“popper.js”，而不是“popperjs”。这正是我一直在寻找的，虽然我试图避免ng引导，但似乎这个解决方案比导入popper和jQuery.5更好。我创建了一个成员布尔变量

isCollapsed

，并在

ngOnInit（）

中将其设置为true，使其默认为collapsed。这实际上解决了我的问题。这应该是正确的答案。你还设法摆脱了像jquery或popper.JS这样的JS库，这在纯Angular应用程序中是不需要的。这也真的很有帮助这真的很有帮助！谢谢分享。这应该是Angular应用程序中的首选方式！荣誉非常有用，竖起大拇指。。。不需要额外的库：）。。。唯一缺少的是“动画”；（属性数据切换为否。）

[ngClass]="{ 'show': isShown }" 

<div class="collapse navbar-collapse" [ngClass]="{ 'show': isShown }" id="navbarSupportedContent" >

<nav class="navbar navbar-expand-lg justify-content-between">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="navButton">
    <i class="fa fa-bars"></i>
  </button>
  <div class="row">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item" *ngFor="let menu of mainmenu, let i = index">
          <a class="nav-link" (click)="findIndex(i)" routerLink="/{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
          <ng-container *ngIf="menu.children && menu.children.length > 0">
            <span class="d-block d-sm-none"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </ng-container>
          <ul class="sub_menu dropdown-menu" [ngClass]="{active : isActive(i)}" *ngIf="menu.children && menu.children.length > 0">
            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" routerLink="/{{sub_menu.href}}" (click)="closeMenu()"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
   }
}

<button #menu class="navbar-toggler d-lg-none" type="button"
    data-toggle="collapse" data-target="#navbarsExampleDefault"
    aria-controls="navbarsExampleDefault" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('menu') menu: ElementRef;

toggleMenu() {
    this.menu.nativeElement.click();
}

closeMenu() {
    const isMenuOpen = this.menu.nativeElement.getAttribute('aria-expanded') === 'true';
    if (isMenuOpen) {
        this.menu.nativeElement.click();
    }
}