Angular 2で反応的なナビゲーションを行うには？

Question

JSでバニラCSSを使用する方法を知っています。しかし、私は角度2で問題を抱えています。

これは私のコンポーネントがこれまでのところどのように見えるかです。

navbar.component.ts

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

@Component({ 
    selector: 'app-navbar', 
    templateUrl: './navbar.component.html', 
    styleUrls: ['./navbar.component.css'] 
}) 
export class NavbarComponent { 
    menuIcon = '☰'; 
    isCollapsed = true; 

    constructor() { } 

    onInit() { 

    } 

    public toggleNav() { 
    this.isCollapsed = !this.isCollapsed; 
    console.log(`Botton menu clicked`); 
    !this.isCollapsed ? this.menuIcon = '✖' : this.menuIcon = '☰'; 
    // return this.menuIcon; 
    } 

} 

navbar.component.html

<nav> 
    <ul class="navigation"> 
    <li><a href="#" (click)="toggleNav()" id="menu__icon">{{menuIcon}}</a></li> 
    <span *ngIf="!isCollapsed"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Work</a></li> 
    <li><a href="#">Contact</a></li> 
    </span> 
    </ul> 
</nav> 

navbar.component.css

.navigation { 
    list-style: none; 
    margin: 0; 

    background: #111; 

    display: flex; 
    justify-content: flex-end; 
} 

.navigation a { 
    text-decoration: none; 
    display: block; 
    padding: 1em; 
    color: white; 
} 

.navigation a:hover { 
    background: lighten(#111, 15%); 
} 

@media all and (max-width: 800px) { 
    .navigation { 
    justify-content: space-around; 
    } 
} 


.navigation #menu__icon { 
    display: none; 
    } 



@media all and (max-width: 600px) { 
    .navigation { 
    flex-flow: column wrap; 
    padding: 0; 
    } 

    .navigation a { 
    text-align: center; 
    padding: 10px; 
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    } 

    .navigation li:last-of-type a { 
    border-bottom: none; 
    } 

    .navigation #menu__icon { 
    display: block; 
    } 

} 

.navigation #menu__icon a { 
    color: tomato; 
    font-size: 1.5em; 
    } 

これまでのところ、モバイルデバイドで私が望むように見えます。より大きなビューポートで連続して表示させるにはどうすればよいですか？

Answer 1

Angular2とtypescriptでブートストラップを使用しています。

NPMインストール--saveブートストラップ

更新.angular-cli.json は、スタイルのセクションに

"スタイル" のブートストラップのリンクを追加します。[ "Styles.cssをします"、 "../node_modules/bootstrap/dist/css/bootstrap.min.css"]

このリンクに従ってくださいhere