角2ルートが変更されたときに閉じられるサイドバー

Question

バーを外に、またはXを内側にクリックすると閉じることができるサイドバーがあります。しかし、私は私が必要なもののように見える何かを見つける

<md-toolbar class='toolbar' color="primary" > 

    <button md-icon-button (click)="nav.open()"> 
    <md-icon class="md-24">menu</md-icon> 
    </button> 


</md-toolbar> 

<md-sidenav-container> 

    <md-sidenav #nav> 
     <md-nav-list> 
    <button md-icon-button (click)="nav.close()"> 
    <md-icon class="md-24">close</md-icon> 
    </button> 
     <a md-list-item routerLink='home'class="active"> Home </a> 

     <a md-list-item routerLink='about' class= "page-scroll" > About us</a> 
    <a md-list-item routerLink='discount' class= "page-scroll" >Discounts </a> 
    <a md-list-item routerLink='contact'class= "page-scroll" >Contact </a> 
     <a md-list-item routerLink='order' class= "page-scroll" >Order</a>... 


    .md-toolbar { 
padding-top: 1em; 
align-self: flex-start; 
height:5em; 


} 


.toolbar{ 

    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 9999; 
    width: 100%; 
    height: 50px; 


} 


md-nav-list{ 
    margin-left: 20px; 
    margin-right: 10px; 
    margin-top: 80px; 
     font-size: 1.2em; 
     font-family: Raleway; 
} 



@media screen and (max-width: 600px) { 
    .logo { 

display: none } 
    .search{ 

    } 
} 


html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.container{ 
    margin-top: 100px; 
     margin-bottom: 100px; 
    flex: 1 0 auto; 

} 

When I choose another tab the background is still black and sidebar is opened, don't collapse

（例えばホームから約または連絡先に開いたままになりますが、私はそれが崩壊することを必要とする）ときに変更ルートの自動クローズを持っている必要があります可能ですがAngularJs用ですあなたはルート>が正常に変更されるたびに、すべての開いたモーダルが閉じられるようにしたい場合はどうすれば$を>聞くことによってあなたは一つの中央の場所でそれを行うことができ、pkozlowski.opensource

によって角度2のためにそれを使用することができますあなたのアプリの実行ブロックで例えばrouteChangeSuccessイベント、：あなたはそれを達成するための非常に簡単な方法になりますすべてのリンクに(click)="nav.close()"を追加することができます

var myApp = angular.module('app', []).run(function($rootScope, $uibModalStack) { 
    $uibModalStack.dismissAll(); 
}); 

Answer 1

、

<a md-list-item (click)="nav.close()" routerLink='home'class="active"> Home </a> 
<a md-list-item (click)="nav.close()" routerLink='about' class= "page-scroll" > About us</a> 
<a md-list-item (click)="nav.close()" routerLink='discount' class= "page-scroll" >Discounts </a> 
<a md-list-item (click)="nav.close()" routerLink='contact'class= "page-scroll" >Contact </a> 
<a md-list-item (click)="nav.close()" routerLink='order' class= "page-scroll" >Order</a> 

希望します。

Answer 2

簡単な解決策は、ルータのイベントを聞くことです。

@ViewChild('nav') sidenav; 

constructor(private router: Router) { 
    router.events.subscribe((val) => { 
    if (val instanceof NavigationEnd) { 
     this.nav.close(); 
    } 
    }); 
} 

このようにして、各リンクにクリックイベントを追加する必要はありません。