如何使用routerLink突出显示角度2中两个不同URL的相同页码

Question

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

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

如何使用角度 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>

在您的组件.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添加一个活动类。 您可以使用 css 突出显示li.active。