routerLinkActive 匹配不同查询参数的路由
routerLinkActive matching routes with different query parameters
此代码生成了一些 link 类似
/报告
/reports?collection=foo
/reports?collection=bar
所有 link 都显示为活动状态。我怎样才能只显示一个确切的 link 为活跃?
<li [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{exact: true}">
<a [routerLink]="['/reports']">
<span class='glyphicon glyphicon-expand'></span> Reports
</a>
</li>
<li [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{exact: true}" *ngFor="let collection of collections">
<a [routerLink]="['/reports']" [queryParams]="{collection: collection}">
<span class='glyphicon glyphicon-unchecked'></span><span>{{collection}}</span>
</a>
</li>
指定路由配置和匹配路由时不包括查询和可选参数。这就是为什么 exact: true 不适合你。
如果您需要确保以不同方式处理路由,请尝试使用必需的参数。然后在配置中定义路由的细节,并在路由器匹配路由时考虑。
此代码生成了一些 link 类似
/报告
/reports?collection=foo
/reports?collection=bar
所有 link 都显示为活动状态。我怎样才能只显示一个确切的 link 为活跃?
<li [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{exact: true}">
<a [routerLink]="['/reports']">
<span class='glyphicon glyphicon-expand'></span> Reports
</a>
</li>
<li [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{exact: true}" *ngFor="let collection of collections">
<a [routerLink]="['/reports']" [queryParams]="{collection: collection}">
<span class='glyphicon glyphicon-unchecked'></span><span>{{collection}}</span>
</a>
</li>
指定路由配置和匹配路由时不包括查询和可选参数。这就是为什么 exact: true 不适合你。
如果您需要确保以不同方式处理路由,请尝试使用必需的参数。然后在配置中定义路由的细节,并在路由器匹配路由时考虑。