Question

我想制作我的自定义指令，根据作为输入传递的值显示或隐藏元素。到目前为止，我只做了指令，但它不起作用。

隐藏directive.ts

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应该可以做到，而不是自定义指令。

Angular 4 Custom指令不起作用

1 个答案: