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

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

0 голосов
/ 26 мая 2018

Я создал директиву 

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'"Я получаю сообщение об ошибке, например

Невозможно установить свойство'thing 'из неопределенного

Как обновить мою директиву, чтобы я мог получить доступ к цели события?

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Чтобы получить доступ к элементу как $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" >

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

0 голосов
/ 26 мая 2018

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

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

constructor(elementRef: ElementRef) { }

...