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元素被“附加”到视图时，该事件应该触发。因此，例如<input (attached)="do something" ...会在<input>显示在页面上时执行某些操作。

事件发生得很好，但我的问题是，当我想要像<input (attached)="$event.target.something = 'anything'"那样访问目标时，我会收到错误，例如

无法设置未定义属性'某事'

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

Answer 1

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

发出组件的elementRef

在构造函数中注入elementRef：

constructor(elementRef: ElementRef) { }

Answer 2

要以$event.target的形式访问元素，请定义一个target属性，该属性返回应用该指令的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元素的$事件的目标？

2 个答案: