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样式。

angular路由高亮之RouterLinkActive

原文地址:https://www.cnblogs.com/gynStrive/p/9928497.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注