Angular 2 Sidebar geschlossen werden, wenn eine Route geändert wird

Question

Ich habe eine Sidebar, die Sie schließen können, wenn Sie außerhalb oder auf X in der Leiste klicken. Aber ich brauche Auto Nähe haben, wenn Änderungen Routen (zB von Home über oder Kontakte offen bleiben, aber ich brauche, dass es zusammenbrach)

<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

ich etwas finden, das aussieht, was ich brauche möglich, aber es ist für AngularJs. Wie kann ich es verwenden für Angular 2 von pkozlowski.opensource

Wenn Sie alle geöffneten Modalverben wollen geschlossen werden, wenn eine Route erfolgreich> geändert wird, können Sie es durch das Hören> zu den $ an einem zentralen Ort tun könnte routeChangeSuccess Ereignis, zum Beispiel in einem Laufblock Ihrer App:

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

Answer 1

Sie (click)="nav.close()" auf alle Ihre Links hinzufügen können, die sehr einfach Art und Weise sein wird, es zu erreichen,

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

Hoffe, das hilft!

Answer 2

Eine einfachere Lösung könnte das Abhören des Router-Ereignisses sein.

@ViewChild('nav') sidenav; 

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

Auf diese Weise müssen Sie keinem Link ein Klickereignis hinzufügen.