routerLinkActive匹配具有不同查询参数的路由

时间:2017-04-14 17:59:11

标签: angular angularjs-routing

此代码生成一些链接,如

/报告

/报告?集合= FOO

/报告?集合=酒吧

所有链接都显示为有效。如何才能将一个确切的链接显示为活动状态?

<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>

1 个答案:

答案 0 :(得分:2)

指定路由配置和匹配路由时,不包括查询和可选参数。这就是为什么确切:真的不适合你。

如果您需要确保路线的处理方式不同,请尝试使用所需的参数。然后在配置中定义路由的细节,并在路由器匹配路由时进行考虑。