angular路由高亮之RouterLinkActive

 <ul nz-menu [nzMode]="'inline'" nzTheme='dark' [nzInlineCollapsed]="isCollapsed">
            <li nz-submenu *ngFor="let parent of menus" [nzOpen]="rla2.isActive" #rla2="routerLinkActive" [routerLinkActive]="['active1']">
                <span title>
                    <i [class.uopicon-open]="!isCollapsed"  [class.uopicon-close]="isCollapsed" class="{{parent.iconClass}}" style="margin-right:10px;"></i>
                    <span>{{parent.nameCn}}</span>
                </span>
                <ul>
                    <li (click)="selected()" nz-menu-item [routerLink]="[item.url]"  routerLinkActive="active"  *ngFor="let item of parent.children">{{item.nameCn}}</li>
                </ul>
            </li>

</ul>

頁面用的ng-design的menu組件，側邊欄分兩級，當我們在二級菜單中激活路由時，一級也要加樣式，這是我們同樣可以用[routerLinkActive]="['active1']"放到一級上，#rla2="routerLinkActive"  rla2.isActive這個可以記錄激活狀態。

下面集合別人的理解及方案

1、我想在點擊a標簽導航的時候，給li添加active的class，於是我這樣寫了

<li [routerLinkActive]="['active']" routerLink="/structure"> <a>導航鏈接</a> </li> 

這個錯誤我已經犯過1次了，雖然導航能工作，但是li上會有額外的樣式！很惡心！
正確的寫法如下

<li [routerLinkActive]="['active']"> <a routerLink="/structure">導航鏈接</a> </li> 

如果你需要在額外的元素上添加樣式，如果是父元素，直接添加[routerLinkActive]="['active']"即可，例如這樣

<li [routerLinkActive]="['active']"> <li [routerLinkActive]="['active']"> <a routerLink="/structure">導航鏈接</a> </li> </li> 

如果不是父元素，你也可以用一個變量記錄routerLinkActive的值，例如這樣

<span [ngClass]="{'open':isopen}"></span> <li #isopen="routerLinkActive" [routerLinkActive]="['active']"> <a routerLink="/structure">導航鏈接</a> </li>

2.

示例

. red {

   color : red ;

}

< a routerLink = "/user/login" routerLinkActive = "red" >login</ a >

當url是user或者/user/login的時候，a標簽將會被加上classred。當url變化為別的時，class將會被移除。

如何添加兩個class？

< a routerLink = "/user/login" routerLinkActive = "class1 class2" >login</ a >

routerLinkActive的兩種寫法

< a routerLink = "/user/login" routerLinkActive = "class1 class2" >login</ a >

< a routerLink = "/user/login" [routerLinkActive]="['class1', 'class2']">login</ a >

也可以給routerLinkActive進行配置參數

傳遞exact: true表示路由完全匹配時才高亮，如

復制代碼 代碼如下:

<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">login</a>

你還可以使用isActive檢查當前是否路由處於激活狀態

< a routerLink = "/user/login" routerLinkActive # rla = "routerLinkActive" >

  login {{ rla.isActive ? '激活' : '未激活'}}

</ a >

如果當前路由處於激活狀態，則會顯示：login 激活

非激活狀態

login 未激活

上述的 rla 為routerLinkActive縮寫，它可以隨便定義。

重點來了： 你可以在使用routerLink元素的父元素上使用RouterLinkActive指令

是不是給每個路由都分別添加樣式好費事？給它父元素添加上路由高亮指令即可解決問題！

< div routerLinkActive = "red" [routerLinkActiveOptions]="{exact: true}">

  < a routerLink = "/user/login" >login</ a >

  < a routerLink = "/user/reset" >reset</ a >

</ div >

只要給a標簽的父元素div添加上routerLinkActive和routerLinkActiveOptions， 當路由是/user/login或/user/reset時其所在dom元素分別被添加上red樣式。 這里需要注意的是要添加上routerLinkActiveOptions指定完全匹配，不然會出現url為user時兩個路由均被匹配上添加了red樣式。