如何使用自定义指令访问绑定到 DOM 元素的 $event 的目标？

Question

我创建了一个指令

import {
  Directive, AfterContentInit, Output, EventEmitter
} from '@angular/core';

@Directive({ selector: '[attached]' })
export class AttachDirective implements AfterContentInit {

  @Output("attached")
  private ee: EventEmitter<AttachDirective> = new EventEmitter();

  ngAfterContentInit() { setTimeout(() => this.ee.next(this)); }

}

定义一个自定义事件，当它绑定到的 DOM 元素获得 "attached" 到视图时应该触发。因此，例如 <input (attached)="do something" ... 在 <input> 出现在页面上时立即执行某些操作。

事件触发良好，但我的问题是，当我想像 <input (attached)="$event.target.something = 'anything'" 一样访问它的目标时，我收到一个错误，例如

Cannot set property 'something' of undefined

如何升级我的指令以便我可以访问事件的目标？

Answer 1

当您使用输出发出组件实例时，没有 $event.target。但是，您可以使用 this.ee.next(this.elementRef)

发出组件的 elementRef

在构造函数中注入 elementRef：

constructor(elementRef: ElementRef) { }

Answer 2

要以 $event.target 的形式访问元素，请定义一个 target 属性即 returns 应用指令的 HTML 元素：

@Output("attached") private ev: EventEmitter<AttachDirective> = new EventEmitter();

constructor(private elementRef: ElementRef) { }

public get target(): HTMLElement {
  return this.elementRef.nativeElement as HTMLElement;
}

ngAfterContentInit() {
  this.ev.next(this);
}

<input type="text" (attached)="$event.target.disabled = true" >

有关演示，请参阅 this stackblitz。

如何使用自定义指令访问绑定到 DOM 元素的 $event 的目标？

How to access the target of an $event bound to a DOM element using a custom directive?

dom-events

angular-directive

angular

angular-event-emitter