Navigation 当路线改变时，将关闭角2侧杆

我有一个侧边栏，当你点击外边栏或内边栏上的X时，你可以关闭它。但我需要在更改路线时自动关闭（例如从“家”到“关于”或“联系人”保持打开，但我需要它折叠）

您可以将

（单击）=“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>

主页
关于我们
折扣
接触
命令

您可以在所有链接中添加

（单击）=“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>

主页
关于我们
折扣
接触
命令

一个更简单的解决方案可能是监听路由器事件

@ViewChild('nav') sidenav;

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

---

这样，您就不必向每个链接添加单击事件。

一个更简单的解决方案可能是侦听路由器事件

@ViewChild('nav') sidenav;

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

---

这样，您就不必在每个链接中添加单击事件。

哦，我的天啊，这太简单了！！！你是天才！非常感谢！！！！：*****这样做会中断路由器，除了导航关闭外，什么也不会发生。没有路线change@YesBarry，cn您添加了一个plunker示例吗？它不起作用，您可以尝试（单击）=“sidenav.close（）”来关闭sidenav哦，我的天哪，这太容易了！！！你是天才！非常感谢！！！！：*****这样做会中断路由器，除了导航关闭外，什么也不会发生。没有路线change@YesBarry，cn您是否添加了plunker示例？它不起作用您可以尝试使用此（单击）=“sidenav.close（）”关闭sidenavNice！负责嵌套组件，这些组件也可能从导航中路由。我喜欢这种方式，而不是干的，但是this.nav或this，sidenav-我尝试了这两种方式，但都不起作用；D@MuhammedMoussa我建议你打开一个包含代码的新问题，并说明你尝试了什么。很好！负责嵌套组件，这些组件也可能从导航中路由。我喜欢这种方式，而不是干的，但是this.nav或this，sidenav-我尝试了这两种方式，但都不起作用；D@MuhammedMoussa我建议打开一个包含代码的新问题，并说明您尝试了什么。