Question

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

但是，当我在console.log中使用native元素的属性时，我得到：

未定义

这是我试过的：

@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操作。更有角度的方法是将指令元素上的属性读取为@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>

Answer 2

这适用于ngOnInit：

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

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

2 个答案: