angular2-routing - 如何使用 routerLink 在 Angular 2 中突出显示两个不同 URL 的相同页码

Question

我有如下分页。我想突出显示以下两个链接的第 2 页。

[routerLink]="['/link/sublink2']
[routerLink]="['/link/sublink22']

如何使用 angular 2 来实现这一点。

<ul class="pagination pagination-plain">

      <li [routerLinkActive]="['active']">
        <a [routerLink]="['/link/sublink1']">1</a>
      </li>
      <li [routerLinkActive]="['active']">
        <a [routerLink]="['/link/sublink2']">2</a>
      </li>
      <li [routerLinkActive]="['active']">
        <a [routerLink]="['/link/sublink3']">3</a>
      </li>
</ul> 

Answer 1

在您的 html 中，

<li [class]="addActiveClass()" >
   <a [routerLink]="['/link/sublink2', '/link/sublink22']">2</a>
</li>

在您的 component.ts 文件中，

private addActiveClass() {
    let fullpath:any[]=this.router.url.split("/")
    if(fullpath[2] == 'sublink2' || fullpath[2] == 'sublink22'){ /* fullpath[2] has the second parameter after the '/'. If you want first parameter after the slash, use fullpath[1] */
      return 'active';
    }else{
      return '';
    }
  }

这会li在您路由到页面时添加一个活动类。您可以突出显示li.active使用 css。