如何使用 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 添加活动的 class。您可以使用 css.

突出显示 li.active

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

How to highlight same page number for two different URLs in angular 2 using routerLink

angular2-routing

routerlink