2017-05-08 102 views
0

我正在使用Angular 4框架構建一個網站,並且有很多不同的組件都可以相互交互。在每個頁面上都可見的一個組件是導航欄組件。導航欄上的每個項目都代表包含子組件的角度模塊。Angular 4 NgModule OnInit?

我的目標是讓項目在導航條強調,對應於當前在你的模塊。有沒有辦法做某種OnInit中的角模塊中,這樣當該模塊中的組件將成爲router-outlet,模塊本身可以告訴導航欄哪個項目要突出顯示?或者有沒有更好的方法來做到這一點?

我的想法是,我想避免的模塊製造,在他們的OnInit方法調用每一個部件,如果不是我可以在父模塊中寫相同的代碼只有一次。

+0

你檢查https://angular.io/docs/ts/latest/api/router/指數/ RouterLinkActive-directive.html? – echonax

+0

這適用於該模塊中的一條路線,但如果用戶在同一模塊內導航到其他路線,該怎麼辦? – Brandon

+0

用戶在同一模塊內導航到不同的路線?在這種情況下,這些線路意味着什麼,因爲它仍然會更新路由器鏈路活動狀態 –

回答

0

我不認爲這是做到這一點的最佳方式,但我之前使用過這種方法,它適用於我。在您的導航欄組件中,注入路由器,以便您可以檢測當前URL是什麼。

constructor(private router: Router){} 

然後在你的導航欄組件的HTML可以使用ngClass有基於關閉路由器狀態導航欄組件。

<a routerLink="/notifications" routerLinkActive="active"><span 
        class=" glyphicon glyphicon-time" 
        [ngClass]="{'active-route': router.url === '/notifications'}"></span></a> 

然後在你的CSS添加規則改變活動路線的風格:

.active-route { color:red // or whatever}