Read/get Angular 中自定义指令中的元素属性 2+

Question

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

然而，当我 console.log 原生元素的属性时，我得到：

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

一个黑客，但可能有用的旁注：

这来自 ngOnInit：

this.hostElement.nativeElement.getAttribute('formcontrolname');

Answer 2

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

提供

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

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

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

然后在您的模板中：

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

Read/get Angular 中自定义指令中的元素属性 2+

Read/get element attribute from within custom directive in Angular 2+

angular2-directives

angular