[英]Angular 9 routerLinkActive not working properly
我的问题是当我点击其他路由器链接时,路由器链接的类
<div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']">Dashboard</div>
仍然活跃,所以我有 2 个活跃的类链接。
app-routing.module.ts
{
path: '',
component: SidebarComponent,
children: [
{path: '', component: DashboardComponent },
{path: 'user-list', component: DashboardComponent },
{path: 'account', component: DashboardComponent },
{path: 'setting', component: DashboardComponent }
]
}
应用程序组件.html
<div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']">Dashboard</div>
<div class="side-link" [routerLink]="['/user-list']" [routerLinkActive] = "['link-active']">User List</div>
<div class="side-link" [routerLink]="['/account']" [routerLinkActive] = "['link-active']">Account</div>
<div class="side-link" [routerLink]="['/setting']" [routerLinkActive] = "['link-active']">Setting</div>
如果您要匹配 URL 与其他路由部分匹配的路由,则需要声明要执行完全匹配。
除非您只有一条路由,否则相对 URL /
将始终被视为与其他路由的部分匹配。
您可以使用routerLinkActiveOptions
来声明您要执行精确匹配。
<div class="side-link" routerLink="/" routerLinkActive="link-active"
[routerLinkActiveOptions]="{ exact: true }" >
Dashboard
</div>
通过部分匹配,我的意思是一个 URL 也是另一个路由的前缀。
例如: /child
是/child/grand-child
的部分匹配。
这不受路由是否声明为子级的影响。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.