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

回答

相關問題