angular - 从 Angular 2+ 中的自定义指令中读取/获取元素属性

Question

我正在构建一个自定义指令，我想在其中读取 native 元素的属性之一 (formControlName)，然后有条件地向该元素添加一个或多个属性。

但是，当我 console.log native 元素的属性时，我得到:

undefined

这是我尝试过的:

@Directive({
  selector: '[appInputMod]'
})
export class InputModDirective implements OnInit {

  constructor(public renderer: Renderer2, public hostElement: ElementRef) { }

  @Input()
  appInputMod() { }

  ngOnInit() {

    console.log(this.hostElement.nativeElement.formcontrolname);

    const el = this.hostElement.nativeElement;
    if (el.formcontrolname === 'firstName')
    {
        this.renderer.setAttribute(this.hostElement.nativeElement, 'maxlength', '35');
    }
  }
}

如何从指令中读取此属性名称？

Answer 1

您正在做的事情看起来不太 Angular，您通常不想开始依赖 DOM 操作。更 Angular 的方法是将指令元素上的属性作为 @Input() 读取，并将结果作为 @Output() 提供:

@Directive({
  selector: '[appInputMod]'
})
export class InputModDirective implements OnInit {
  @Input() formcontrolname: string;
  @Output() somethingHappened: EventEmitter<any> = new EventEmitter<any>();

  ngOnInit() {
    if (formcontrolname === 'firstName') {
      this.somethingHappened.emit({maxlength: 35});
    }
  }

然后在你的模板中:

<some-element appInputMod formcontrolname="myName" (somethingHappened)="doSomething($event)">
</some-element>