2017-11-03 15 views
0

다음과 같이 페이지 매김을했습니다. 두 링크 모두에 대해 페이지 번호 2를 강조하고 싶습니다. routerLink를 사용하여 2 번 각도에서 두 개의 서로 다른 URL에 동일한 페이지 번호를 강조 표시하는 방법

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

어떻게 각도가 HTML에서

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

답변

0

2.

<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 페이지로 라우팅 할 때. CSS를 사용하여 li.active을 강조 표시 할 수 있습니다.