角度2とブートストラップ4のレスポンシブなナビバー

Question

いくつかのオプションがある上にナビゲーションバーがあるウェブアプリケーションを構築しようとしています。ただし、ウェブサイトがモバイルデバイスで表示されている場合、ナビゲーションバーが縮小し、ユーザーがオプションを表示するためのアイコンが表示されます。私は（ドロップダウンが機能しない）私は、ブートストラップ4つの例を試してみましたが、それらは、角2であまりにもうまく動作するように見えるいけないブートストラップ4.

で角度2を使用しています。このウェブサイト Responsive website

から示されるように正確に動作。これは、角チームが実際にng-bootstrapというブートストラップと統合するために独自のフレームワークで作業していることがわかったときです。しかし、そこには応答性の高いnavbarについては何もありません。

このようなナビゲーションバーを手動で作成せずに、画面サイズを確認したり、変更したりすることができますか？

Answer 1

これを行うには、ブートストラップと角度を組み合わせることができます。 Angular 4を使用していますが、このソリューションも2で動作するはずです。私もBootstrap 4（ベータ版）を使用しています。アルファ版を使用していた場合、これは少し異なります。

マークアップ：

<nav class="navbar navbar-expand-sm navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Brand/Logo</a> 
    <button class="navbar-toggler" (click)="collapse=!collapse" type="button" aria-expanded="false" aria-label="Toggle navigation" 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="navbar-collapse" (click)="collapse=true" [hidden]="collapse"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

コンポーネント：私たちは、ブートストラップ崩壊プラグインを取り除くとで行われ、それは本当に簡単なバージョンを使用して、この溶液中でやっている

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-nav-bar', 
    templateUrl: './nav-bar.component.html', 
}) 
export class NavBarComponent { 
    collapse: boolean = true; 

    constructor() { } 
} 

角度。私たちはブートストラップに大画面のメニューの表示/非表示を処理させ、ユーザーがトグルボタンをクリックするまで、小さな画面で折りたたみ可能なメニューを非表示にします。これを行うには、[hidden]ディレクティブをAngularで使用し、collapseというブール型変数に結び付けます。ボタンがクリックされると折りたたまれて表示され、メニュー項目が選択されるとfalseに設定されます。

この回答は、数年前にこの同じトピックを投稿した先の回答（残念ながら私は見つけることができませんでしたが、Bootstrap 3.xとAngularJS（1.x）の回答でした。