Angular 4自定義指令不起作用

Question

我想使我的自定義指令顯示或隱藏一個元素，具體取決於作為輸入傳遞的值。 到目前為止，我僅發出了指令，但是它不起作用。

隱藏指令

import { Directive, ElementRef, Renderer, Input } from '@angular/core';
@Directive({ selector: '[myHidden]' })
export class HiddenDirective {
    @Input() myHidden: string;
    constructor(el: ElementRef, renderer: Renderer) {
     if (this.myHidden) {
        console.log('hide');
       renderer.setElementStyle(el.nativeElement, 'display', 'none');
     }
    }
}

App.html <input type="text" name="val" id="val" [(ngModel)]="val"> <h1 [myHidden]="val">Hidden Welcome</h1>

Answer 1

因為您的指令正在接觸DOM，所以一旦加載視圖，就應該進行修改。 為此使用生命周期鈎子，為什么不使用最后一個， AfterViewInit ：

import { Directive, ElementRef, Renderer, Input, AfterViewInit } from '@angular/core';
@Directive({ selector: '[myHidden]' })
export class HiddenDirective implements AfterViewInit {
    @Input() myHidden: string;
    constructor(el: ElementRef, renderer: Renderer) {}

    ngAfterViewInit() {
      if (this.myHidden) {
        console.log('hide');
        renderer.setElementStyle(el.nativeElement, 'display', 'none');
      }
    }
}

順便說一句，簡單的*ngIf應該可以解決問題，而不是使用自定義指令。