2016-07-15 2 views
3

나는 다음과 같은 HTML 템플릿이있는 탭 구성 요소 TabComponent 있습니다액세스 [routerLinkActive] 구성 요소 클래스의 값

<a [routerLink]='link' [routerLinkActive]="[is-active]">link label</a> 
<button>Close tab</button> 

내가 [routerLinkActive] 속성의 값으로 접근하고 싶습니다를 기본적으로 나는 싶습니다 이 routerLink가 활성 상태인지 여부를 나타내는 구성 요소 클래스 내부의 변수를 가져옵니다. 구성 요소 클래스 내에서 어떻게 액세스 할 수 있습니까?

편집 : 나는 작업이 이루어집니다 <a> 링크 태그의 CSS 클래스에 대한 액세스 권한을 얻을 수 있는지, 액세스 할 수있는 방법이 있다고 생각?

+0

'routerLinkActive'에는 상태에 액세스하기위한 public 속성이 없습니다. 코드를 복사하여 필요에 맞게 조정하여 활성 상태로 만들 수 있습니다. https://github.com/angular/angular/blob/dabf214f170eda8e1ecd2ff4ab252738e7aa0ddb/modules/%40angular/router/src/directives/router_link_active.ts –

+0

CSS 읽기 수업은 꽤 못생긴다. Angular2에서 DOM은 바인딩을 사용하여 모델을 반영해야하지만 컨트롤러는 DOM에 직접 액세스하지 않아야합니다. –

답변

4

이 전혀하지만 도움이 될 경우 당신이 이런 식으로 템플릿의 값을 얻을 수 있습니다 모르겠어요

<a *ngFor="let child of directory; let i = index;" 
    routerLink="{{child.route}}" 
    routerLinkActive #rla="routerLinkActive"> 

    <h3>{{rla.isActive}}</h3><!--Displays boolean indicating whether or not you are navigated to this link--> 
</a> 

지금, 부울 당신이 있는지 여부를 나타내는 당신의 H3에 표시됩니다 현재 링크로 이동합니다. 이 템플릿 변수로 작동하지만

, 나는 component.ts에 값을 전달하거나 다른 템플릿 지시에 전달할 수 없었습니다 내가이 도움이 되었으면 좋겠

<a *ngFor="let child of directory; let i = index;" 
    routerLink="{{child.route}}" 
    routerLinkActive #rla="routerLinkActive" 

    [active]="rla.isActive" <!--This doesn't insert the boolean here for some reason--> 
    >  
    <h3>{{rla.isActive}}</h3> 
</a> 

을 예컨대. 좋은 해결책에 가까워지면 업데이트하십시오.