Angular 2根据当前路由器状态更改sidenav内容

我正在开发Angular 2中的单页应用程序。我正在使用角度材料mat-sidenav和mat-工具栏。工具栏有sidenav切换按钮，可打开“客户”部分和“报告”部分的按钮。这个结构在整个项目中都很常见。Angular 2根据当前路由器状态更改sidenav内容

因此，应用程序是这样的：

我有可能会根据路由器的当前状态更改sidenav的内容（主域）。所以，如果“客户”部分打开，sidenav应显示与客户相关的一些小节。同样，对于“报告”部分，只有与报告相关的小节应该可用。我该怎么做？

来源

2017-10-18 Nikita Marinosyan

我已想出如何与布局的方式做到这一点。你可以看到使用这种方法实现管理系统的例子here

来源

2017-10-31 15:44:54

我已经通过检查URL路径是否包含某个指定部分来完成此操作。例如，如果你想为客户可见的子菜单也可以是'/clients'等等，那么你只需要使用*ngIf指令：

<ul *ngIf="location.includes('/clients')">

要检查你要听的路由器改变当前的URL。因此，在您拥有sidenav内容的组件中，您需要订阅router.events属性。

import { Router, NavigationEnd } from '@angular/router'; 
import 'rxjs/add/operator/filter'; 
... 
export class SidenavComponent { 
    location = ''; 
    constructor(router: Router) { 
    router.events 
     .filter(event => event instanceof NavigationEnd) 
     .subscribe((event: NavigationEnd) => { 
     this.location = event.url 
     }) 
...

除了NavigationEnd路由器发出多个其他活动，所以我们筛选它们例如在上面和订阅后，我们更新location财产

来源

2017-10-19 13:05:56 Lothir

Angular 2根据当前路由器状态更改sidenav内容

回答

相关问题