Angular 2 - 爲所選的子菜單項添加自定義類別

Question

我使用帶有可視化組件的第三方零件庫。菜單是建立爲平坦的ul/li/a：

<ul class="abs-nav abc-left"> 
    <li><a [routerLink]="['Dashboard']">Dashboard</a></li> 
    <li><a [routerLink]="['SystemInformation']">System information</a></li> 
    <li><a [routerLink]="['Health']">Health</a></li> 
    <li><a href="#" data-dropdown="#tasks-menu" dropdown-position='right'>Tasks</a></li> 
</ul> 

和子菜單被添加爲單獨的列表，然後他們粘在JS中。

<ul id="tasks-menu" class="abc-dropdown"> 
    <li><a [routerLink]="['TasksUpdate']">Update</a></li> 
    <li><a [routerLink]="['TasksDeployment']">Deployment</a></li> 
</ul> 

我加這標誌着從頂層菜單（添加背景顏色爲.abc-nav li a.router-link-active。

我需要router-link-active類添加到任務菜單時，選擇其子項的一個選擇項的CSS。

我發現那些SOS： In Angular 2 how do I assign a custom class to an active router link?，Changing the default name of "router-link-active" class by writing a custom directive that adds new class

Answer 1

看一看這個曲注意：angular2-how-to-use-an-or-statement。

基本上你需要的是：

電流路徑可以從位置例如爲：

class MyController { 
    currentPath: string; 

    constructor(private location: Location, private router: Router) { 
     this.router.subscribe((val) => { 
      this.currentPath = location.path(); 
     }); 
    } 
}