每當路線發生變化時，角2邊欄將被關閉

我有一個側邊欄，您可以在酒吧內點擊室外或X內部時關閉該邊欄。但是我需要有自動關閉時改變路線（例如從家到公司或隱形眼鏡保持打開狀態，但我需要它摺疊）每當路線發生變化時，角2邊欄將被關閉

<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。我如何使用它的角2通過pkozlowski.opensource

如果你想每當路線>成功改變被關閉所有打開的情態，你可以做它在一箇中心位置通過監聽>到$ routeChangeSuccess事件，例如在你的應用程序的運行塊：

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

來源

2017-05-10 Olga Lanova

您可以添加(click)="nav.close()"到所有的鏈接，這將是實現它的非常簡單的方法，

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

希望這有助於！

來源

2017-05-10 18:11:40

哦，我的上帝是如此輕鬆！你是天才！非常感謝！！！！：***** –

這樣做會中斷路由器，除了導航關閉之外沒有任何事情發生。沒有路線變更 –

@YesBarry，cn你添加一個蹲下的例子？ –

更簡單的解決方案可能是偵聽路由器事件。

@ViewChild('nav') sidenav; 

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

這樣，您不必爲每個鏈接添加點擊事件。

來源

2018-01-15 15:27:30

每當路線發生變化時，角2邊欄將被關閉

回答

相關問題