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

Question

我正在开发Angular 2中的单页应用程序。我正在使用角度材料mat-sidenav和mat-toolbar。工具栏具有sidenav切换按钮，用于打开“客户端”部分和“报告”部分的按钮。这种结构在整个项目中很常见。

所以应用程序看起来像这样：

我必须根据路由器的当前状态更改sidenav（和主字段）中的内容。因此，如果打开“客户端”部分，则sidenav应显示与客户端相关的一些子部分。同样，对于“报告”部分，只应提供与报告相关的小节。我该怎么做？

Answer 1

我通过检查URL路径是否包含某些指定部分来完成此操作。例如，如果您希望客户端具有可见的子菜单，则可以是'/clients'等。然后您只需使用*ngIf指令：

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

要检查当前网址，您必须侦听路由器更改。因此，在您有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属性

Answer 2

我已经想出如何使用布局方法来做到这一点。您可以使用此方法here

查看管理系统的实施示例