angular - 在 Angular2/4 中有条件地绑定(bind)一个属性

Question

我希望 placeholder 属性(或任何其他属性)只有在定义时才进入 DOM。我试过了

<textarea ... [placeholder]="value || null/false/undefined...etc" ... </textarea>

但这些仅显示为 null、false 等...如果值未定义或为 null，则作为文本字段的占位符。 (我知道我可以做 "value || ' '" 这对 placeholders 有用，但我正在寻找一个更通用的解决方案来防止任何未定义的属性被获取进入 DOM - 就好像 [property]="... 根本不会在那里。)

为什么我需要这个？因为我的表单应该是动态的，因为占位符和其他属性来自一个界面，当它们到达我的模板时不一定必须定义。

Answer 1

您始终可以创建包含在宿主元素上设置 placeholder 属性的逻辑的指令:

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

@Directive({
  selector: '[placeholder]'
})
export class PlaceholderDirective {
  @Input() placeholder;

  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  ngOnChanges() {
    if(this.placeholder) {
      this.renderer.setAttribute(this.elRef.nativeElement, 'placeholder', this.placeholder);
    } else {
      this.renderer.removeAttribute(this.elRef.nativeElement, 'placeholder');
    }
  }
}

或者我们可以像这样简化这个指令:

@Directive({
  selector: '[placeholder]'
})
export class PlaceholderDirective {
  @HostBinding('attr.placeholder') @Input() placeholder;
}

但您始终可以在模板中使用属性绑定(bind):

<textarea [attr.placeholder]="null"></textarea>