@angular : 선택한 경로를 기반으로 특성을 추가하는 지시문을 작성하는 방법은 무엇입니까?

Question

다음 코드가 올바르게 작동합니다 (특성 데이터 토글 상태)가 활성 및 비활성으로 올바르게 설정되었습니다.

<a [routerLink]="['/home']" [attr.data-toggle-state]="router.isActive('/home', true) ? 'active' : 'inactive'">Home</a> 
<a [routerLink]="['/admin']" [attr.data-toggle-state]="router.isActive('/admin', true) ? 'active' : 'inactive'">Home</a> 

는 그러나, 나는 동일한 기능을 가진 새 지침을 만들려고합니다. this.route 항상 정의되지 않은, 그러나

<a routerLink]="['/home']" xDataToggleState="/home">Home</a> 

:

내 타이프 라이터 지시어 코드는 다음과 같습니다

Directive({ 
    selector: '[xDataToggleState]' 
}) 
export class ToggleStateDirective { 

    @Input('xDataToggleState') 
    public route: string; 

    constructor(private router: Router, private activeRoute: ActivatedRoute, private el: ElementRef, private render: Renderer) { 
     this.toggle(this.route); 
    } 

    private toggle(route: string) { 
     if (this.route) { 
      this.render.setElementAttribute(this.el.nativeElement, 'data-toggle-state', this.router.isActive(this.route, false) ? 'active' : 'inactive'); 
     } 
    } 
} 

그리고 HTML은 같다? 따라서 지시문은 작동하지 않습니다.

Answer 1

@yurzui의 도움으로이 기능을 사용할 수있었습니다. 그러나 나는 ngDoCheck()을 사용했습니다.

아래의 지침에서 작업 코드를 참조하십시오 :

import { Directive, ElementRef, Input, Renderer, HostListener, OnInit, OnChanges, SimpleChanges, DoCheck } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 

@Directive({ 
    selector: '[xDataToggleState]' 
}) 
export class ToggleStateDirective implements OnInit, DoCheck { 

    @Input('xDataToggleState') 
    public route: string; 

    constructor(private router: Router, private el: ElementRef, private render: Renderer) { 
    } 

    public ngOnInit(): void { 
    } 

    public ngDoCheck(): void { 
    this.toggle(this.route); 
    } 

    private toggle(route: string) { 
    console.debug('route=' + this.route); 

    if (this.route) { 
     console.debug('this.router.isActive(this.route, false)=' + this.router.isActive(this.route, false)); 
     this.render.setElementAttribute(this.el.nativeElement, 'data-toggle-state', this.router.isActive(this.route, false) ? 'active' : 'inactive'); 
    } 
    } 
} 

나는 메뉴 항목을 클릭하면 모든 항목이 관리자 링크를 클릭 할 때 콘솔 로그에서 볼 수 있듯이 업데이트됩니다.

route=/home 
this.router.isActive(this.route, false)=false 

route=/admin 
this.router.isActive(this.route, false)=true 

route=/data 
this.router.isActive(this.route, false)=false