無法切換導航欄4中的導航欄

Question

爲什麼我無法在使用引導程序4調整角度4的移動屏幕時切換導航欄4.我將它包含在腳本和樣式中的角度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> 

.angular-cli.json

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ], 
    "scripts": [ 

    "../node_modules/popper.js/dist/umd/popper.min.js", 
    "../node_modules/jquery/dist/jquery.min.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 

    ], 

的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" 
    } 
} 

Answer 1

@Joseph，它看起來像您尚未安裝的依賴關係bootstrap（和bootstrap本身）讓navbar切換工作。

如果你打開終端或命令行，然後導航到包含package.json文件的目錄，運行以下命令：爲你的項目

npm install --save jquery 
npm install --save popperjs 
npm install --save bootstrap@4.0.0-beta 

這些命令將安裝必要的依賴關係。他們對自己的工作非常清楚，但如果您需要刷新他們正在做的或他們的工作方式，我會建議您查看位於here的npm install的文檔。

安裝完成後，您需要確保將它們包含在.angular-cli.json文件中，這樣您纔可以使用它們。

Answer 2

看起來您可能一直在尋找來自Bootstrap的this示例。我做了，並且有同樣的問題。

問題是它不是一個角度的例子，所以它不會工作。要使它工作，你必須使用(click)事件和一個變量。所以，你的模板改變

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

如果你想在默認情況下被壓扁你的菜單，你應該設置變量爲true，在類（在你的.ts文件的組成部分）public isCollapsed = true;

這裏有一個plunker

還有一件事;如果你的導航是在一個共享模塊中，你也必須記得在這裏導入NgbCollapseModule。

也就是說，你shared.module.ts應該是：

import { NgModule } from '@angular/core'; 
import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'; 
/*Plus all your other modules*/ 

@NgModule({ 
    imports: [NgbCollapseModule], 
    declarations: [], 
    exports: [] 
}) 
export class SharedModule {} 

Answer 3

這個例子提供了一個漢堡包圖標兩者切換功能（換句話說，如果它在響應模式下運行整個導航欄），以及切換下拉菜單項。

它使用ng-bootstrap，但我寧願去與原生Bootstrap導航欄支持，而不是做這個「黑客」！？

顯然其他有同樣問題而大傷腦筋：https://github.com/twbs/bootstrap/issues/24227

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">ApplicationName</a> 
    <button class="navbar-toggler" type="button" (click)="toggleNavbar = !toggleNavbar"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" [ngbCollapse]="!toggleNavbar"> 
    <ul class="navbar-nav"> 
     <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="#">Features</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Pricing</a> 
     </li> 
     <li ngbDropdown class="nav-item"> 
     <a class="nav-link" id="navbarDropdownMenuLink" ngbDropdownToggle aria-haspopup="true" aria-expanded="false"> 
      Dropdown link 
     </a> 
     <div ngbDropdownMenu aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 
    </ul> 
    </div> 
</nav>