Question

我希望占位符属性（或任何其他属性）只有在定义时才会进入DOM。我试过了

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

但是这些只显示为null，false等...作为文本字段的占位符，如果未定义值或为null。（我知道我可以做"value || ' '"哪些适用于占位符，但我正在寻找一种更通用的解决方案来保持任何未定义的属性进入DOM -as if {{1根本不存在。）

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

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;
}

但您始终可以在模板中使用属性绑定：

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

有条件地绑定Angular2 / 4中的属性

1 个答案: