URLに基​​づいて各ページのナビゲーションバーの名前とアイコンを動的に変更するにはどうすればよいですか？角度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

、

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

wifiicon：ここ

は私のコードです

コンポーネント内にrouteChangeという名前の関数を作成します

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