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

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

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

Невозможно установить свойство «что-то» неопределенного

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


angular dom-events angular-directive angular-event-emitter
person tom    schedule 26.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person ConnorsFan    schedule 26.05.2018

arrow_upward
1
arrow_downward

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

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

constructor(elementRef: ElementRef) { }

person Joshua Chan    schedule 26.05.2018
comment
Я импортировал ElementRef, внес предложенные вами изменения, а также изменил ee: EventEmitter<AttachDirective> на ee: EventEmitter<ElementRef> (это нормально?), но все равно получаю ту же ошибку. - person tom; 26.05.2018
comment
К каким свойствам вы обращаетесь? Обратите внимание, что ElementRef — это просто ссылка, API DOM находится в elementRef.nativeElement. Есть определенные последствия при использовании nativeElement в Angular. Google что-то известное как renderer2 - person Joshua Chan; 26.05.2018
comment
Использование next(this.elementRef.nativeElement) вместо next(this.elementRef) работает, но теперь я должен использовать $event.disabled = 'disabled' вместо $event.target.disabled = 'disabled', чтобы, скажем, отключить <input> в представлении. Или для доступа к любому другому свойству. Итак, что должно быть целью, теперь $event. Я попытался написать next({target: this.elementRef.nativeElement}), но, видимо, это не тот способ. Любые идеи? Может, мне стоит проверить Renderer2... - person tom; 26.05.2018