如何根據url在每個頁面上動態更改導航欄名稱和圖標？ Angular 2

Question

我需要根據頁面URL動態更改導航欄名稱和圖標。

這裏是我的代碼：

<nav id="brand" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <div class="navbar-brand"> 
      <img src="{{wifiStatusIcon}}" class="wifiStatusIcon"> 

     </div> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 

     <ul class="nav navbar-nav"> 
      <li><a href="" [routerLink]="['/materials']"> <h3 class="pageName" ng-bind="$root.name">{{title}} </h3> </a></li> 
      <li><a class="headerIconATag"><img class="headerIcon" src="{{headerIcon}}"></a></li> 
     </ul> 
    </div> 
    <!--/.nav-collapse --> 
</div> 

Answer 1

連接上的所有鏈接點擊事件並調用組件的功能，在該功能的改變，你的所有綁定變量一樣的狀態圖標，wifiicon

<ul class="nav navbar-nav"> 
     <li><a href="" [routerLink]="['/materials']" (click)='routeChange("/materials")' > <h3 class="pageName" ng-bind="$root.name">{{title}} </h3> </a></li> 
     <li><a class="headerIconATag"><img class="headerIcon" src="{{headerIcon}}"></a></li> 
    </ul> 

在組件中創建名爲routeChange的函數

routeChange(route:string){ 
     if(route==="\material"){ 
     this.wifiStatusIcon ="icon/" 
    }else{ 
     this.wifiStatusIcon ="icon2" 
    } 
}