ng2中,可以通过
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
给激活的路由绑定动态class,通过设置class样式即可设置激活的路有链接的样式。
但是当页面跳到其他路由(上面两个以为的其他路由),两个路由链接都不处于激活状态,失去class样式。
不过可以通过RouterLinkActive特性让路由链接保持激活状态
RouterLinkActive指令会基于当前的RouterState对象来为激活的RouterLink切换CSS类。 这会一直沿着路由树往下进行级联处理,所以父路由链接和子路由链接可能会同时激活。 要改变这种行为,可以把[routerLinkActiveOptions]绑定到{exact: true}表达式。 如果使用了{ exact: true },那么只有在其URL与当前URL精确匹配时才会激活指定的RouterLink。
所以只要通过设置父子路由即可。
符:路有链接传参方式:
<nav class="app_nav">
<div *ngFor="let item of currentUser?.frontSet;let last = last;" [isLast]="last" (lastDone)="initVav()">
<a [routerLink]="item.code" [queryParams]="{userName : currentUser.name}" routerLinkActive='active'>
{{item.moduleName}}
</a>
</div>
</nav>
下一篇讲到的动态路由替代方案也会用到这段代码