如何在Angular 2中做出响应式导航？

问题描述：

我知道如何用JS和vanilla CSS做到这一点。不过，我在使用Angular 2时遇到了麻烦。如何在Angular 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; 
    }

到目前为止，它看起来像我想在移动设备。如何让它在更大的视口上连续显示？

答

在Angular2和typescript中使用引导。

NPM安装--save引导

更新.angular-cli.json 添加引导链接样式节

“风格”： “styles.css的”， “../node_modules/bootstrap/dist/css/bootstrap.min.css”]

然后关注此链接here

如何在Angular 2中做出响应式导航？

相关推荐