使一个简单的 DOM 属性成为来自指令的单向绑定

Question

很明显，我的目标是在使用 angular 指令作为

后，使元素看起来像 <input type="text" [placeholder]="'example'" /> <input type="text" placeholder="example" />

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

@Directive({
  selector: 'input[placeholder]'
})
export class PlaceholderDirective {
  @HostBinding('placeholder') placeholder:string;
  constructor() {
  }
}

但我现在真的不知道如何在没有 undefined 值的情况下获取 [placeholder] 中的第一组 placeholder="A placeholder"。

Answer 1

好的，我通过提问和写下问题来回答自己，但这里是为那些会问自己这个问题的人准备的：我导入 ElementRef 来访问原始占位符值并直接在 constructor 中设置它！

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

@Directive({
  selector: 'input[placeholder]'
})
export class PlaceholderDirective{
  @HostBinding('placeholder') placeholder:string;
  constructor(elementRef: ElementRef) {
    this.placeholder = elementRef.nativeElement.placeholder;
  }
}

使一个简单的 DOM 属性成为来自指令的单向绑定

Make a simple DOM attribute a one-way binding one from a directive

javascript

angular-directive

angular