Angular 4從子OnInit檢測路線？

Question

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

我的目標是在導航欄中突出顯示與您當前所在的模塊相對應的項目。是否可以在Angular模塊中進行某種OnInit操作，以便當該模塊中的組件成為路由出口時，模塊本身可以告訴導航欄突出顯示哪個項目？ 還是有可能更好的方式做到這一點？

我的想法是，我想避免模塊中的每個組件都在其OnInit方法中進行調用，否則我可以在父模塊中只編寫一次相同的代碼。

Answer 1

我不認為這是最好的方法，但是我以前使用過這種方法，並且對我有用。 在導航欄組件中，注入路由器，以便您可以檢測到當前URL。

 constructor(private router: Router){}

然后，在navbar組件HTML中，可以使用ngClass使navbar組件基於路由器狀態。

  <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}