navigation - ルートが変更されるたびに閉じられるAngular 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;

}

別のタブを選択すると、背景がまだ黒く、サイドバーが開いています。折りたたまないでください

必要なもののように見えるものを見つけましたが、それは AngularJs 用です。pkozlowski.opensourceによるAngular 2での使用方法

>ルートが正常に変更されるたびに開いているすべてのモーダルを閉じたい場合は、アプリの実行ブロックなどで $routeChangeSuccess イベントをリッスンすることで、中央の 1 か所でそれを行うことができます。

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