Как получить доступ к цели $event, связанной с элементом DOM, используя пользовательскую директиву?

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определить 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" >

Смотрите этот стек для демонстрации.

Answer 2

$event.target не существует, когда вы генерируете экземпляр компонента, используя output. Вы можете, однако, испустить elementRef вашего компонента, используя this.ee.next(this.elementRef)

Вставьте elementRef в ваш конструктор:

constructor(elementRef: ElementRef) { }