根據下拉選擇在Angular2中路由應用程序

Question

我正在使用Angualr2實現單頁應用程序。它應該能夠處理一個應用程序中的多個用戶角色。假設我有兩個用戶角色管理員和員工和登錄用戶應該能夠通過選擇頂部下拉菜單在這些角色之間進行切換。每個角色都包含組件中的不同視圖。

如由默認的用戶上面的圖片已被分配給管理員 role.according的下拉選擇左側菜單路徑URL將被改變類似下面。

dropDown Value= Admin 
Home url =/home/admin 
Reports url=reports/admin 

if drop down value Employee 
dropDown Value= Employee 
Home url =/home/employee 
Reports url=reports/employee 

注：這項工作與當前的implementation.But完美的罰款有一個問題，如果我再以相同的URL路徑。例如：假設目前下拉選擇聯繫，並在主頁視圖和同一視野內，如果我改變價值下拉到員工和再單擊主菜單它不會更新主頁視圖數據，即使我用角色服務。但url按預期更改。

（1）我的第一個問題是，我怎樣才能更新視圖再次任何angaulr生命週期鉤實現我的邏輯？

（2）我的第二個問題是，我如何獲得angaulr中的當前URL並更新url。例如：下拉選擇**聯繫，並在主頁視圖然後同一視圖內改變下拉值到員工，因此URL應該從/首頁/管理員更改爲/家/員工所以我怎麼能只附加參數值的方式？**

左側菜單中的HTML

<a (click)="appNavigateTo('/home')"> 
      <span>Home</span> 
</a> 
<a (click)="appNavigateTo('/reports')"> 
      <span>Reports</span> 
</a> 

MenuComponent.tc

個

appNavigateTo(url: any) { 
    this.router.navigate([url, this._roleService.getCurrentlyLoggedInRole()]); 
    } 

Route.ts

{ path: 'home/:role',   component: HomeComponent}, 
{ path: 'report/:role',   component: ReportComponent}, 

DropdownComponent.ts

export class DropdownComponent{ 

    construtor (private _roleService : RoleService){} 
    getSelectedRole(event: any) { 
     this._roleService.setCurrentlyLoggedInRole(event.target.value); 
    } 

} 

RoleService.ts

static LOGGED_IN_ROLE= ROLE.ADMIN; 
    /* Return the currently logged in role*/ 
    public getCurrentlyLoggedInRole(): String { 
    return RoleService.LOGGED_IN_ROLE; 
    } 
    /*Set currently logged in role*/ 
    public setCurrentlyLoggedInRole(role: string): void { 
    RoleService.LOGGED_IN_ROLE = role; 
    } 

請讓我知道如何克服上述問題。感謝任何幫助。

Answer 1

1. 您可以通過訂閱ngOnInit生命週期掛鉤中的activatedRoute observable來更新視圖。這允許您

   ngOnInit(){ 
       this._activatedRoute.params.subscribe(params => { 
        // this is ran everytime the url changes 
        // do whatever you need to update the view 
       } 
   } 
   

https://angular.io/api/router/ActivatedRoute

我有點通過＃2混淆。我認爲這可能是值得的路線快照https://angular.io/api/router/ActivatedRoute#members