Bootstrap 4のNavbarをAngularで切り替えることができません

Question

なぜ、私はbootstrap 4を使ってangle 4のモバイル画面にリサイズするときにnavbarを切り替えることができません。スクリプトとスタイルの角度cli、bootstrapのノードモジュールに含めました。私のコードに何か不足していますか？下記をご確認ください。何か間違っていますか？あなたが依存関係をインストールしていないよう

<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、それが見えます助けてくださいブートストラップ（およびブートストラップ自体）を使用して、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

あなたがブートストラップのthisの例を見ているようです。私はして、同じ問題があった。

問題は角のない例ではありませんので問題はありません。動作させるには、(click)イベントと変数を使用する必要があります。だから、ここでplunkerだpublic isCollapsed = true;

（あなた.TSでコンポーネント用のファイル）あなたは、あなたのメニューはデフォルトでは折りたたまれたい場合は、あなたのクラスでtrueに変数を設定する必要があり

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

にテンプレートを変更します

もう1つ;あなたのnavが共有モジュールにある場合は、ここでも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を使用しますが、この「ハッキング」の代わりにネイティブのブートストラップnavbarサポートを使用しますか？明らかに

他の人が同じ問題と格闘：どのようにあなたの角度のアプリで、あなたの依存関係を含めている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>