Angular 4自定义指令失效：实现元素显隐控制功能失败

嘿，我一眼就看出问题出在哪了——你的指令逻辑写在了构造函数里，但这时候Angular还没把输入属性的值绑定进来呢！而且就算后续输入框的值变了，你的指令也没监听这个变化，自然不会更新元素的显示状态。

问题根源 #

Angular的构造函数在指令初始化时就执行了，这时候@Input()装饰的myHidden还没拿到模板里传过来的值，所以一开始的判断完全不起作用。而且你也没处理输入值后续的变化，输入框内容改变时指令根本没反应。

解决方案：用Input Setter监听变化 #

最简洁的方式是把@Input改成setter，每次输入值变化时自动触发逻辑：

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[myHidden]' })
export class HiddenDirective {
  // 用setter监听myHidden的取值变化
  @Input() set myHidden(value: string) {
    // 把字符串转成布尔值：非空字符串就隐藏元素
    const shouldHide = !!value;
    this.el.nativeElement.style.display = shouldHide ? 'none' : '';
  }

  constructor(private el: ElementRef) {}
}

另一种方案：用ngOnChanges生命周期钩子 #

如果你的指令有多个输入属性需要监听，用ngOnChanges会更清晰：

import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';

@Directive({ selector: '[myHidden]' })
export class HiddenDirective implements OnChanges {
  @Input() myHidden: string;

  constructor(private el: ElementRef) {}

  ngOnChanges(changes: SimpleChanges) {
    // 只处理myHidden属性的变化
    if (changes['myHidden']) {
      const shouldHide = !!changes['myHidden'].currentValue;
      this.el.nativeElement.style.display = shouldHide ? 'none' : '';
    }
  }
}

模板部分无需修改 #

你的App.html代码完全没问题，保持原样即可：

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

额外提示 #

如果需要更严格的判断（比如输入'false'时不隐藏元素），可以调整判断逻辑：

const shouldHide = value !== '' && value.toLowerCase() !== 'false';

内容的提问来源于stack exchange，提问作者joeee