routerLink和routerLinkActive动态传参

[deepthan]

假设个场景：做一个菜单，有的节点是点击出现子节点，有的节点是点击跳转路由

想要实现是连接则跳转，不是连接则不跳转，可以这样做。

ts

isLink : boolean = false;

html

<div
    [routerLink]="isLink ?   data.url : null"
    routerLinkActive="node-active">
</div>

css

.node-active{
    background: #006189;
}

可以正常跳转，但是路由只要是Null的话就会处于激活状态，所以还需对routerLinkActive进行判断。

html

<div
    [routerLink]="isLink ?  null : data.url"
    routerLinkActive="{{isLink ? 'node-active' : null }}">
</div>