Angular: Вывести обратный вызов моего события Custom Directive и подписаться на него в моем компоненте - PullRequest
Новая
       33

Angular: Вывести обратный вызов моего события Custom Directive и подписаться на него в моем компоненте

0 голосов
/ 07 октября 2018

В моем приложении Angular я выполнил пользовательскую директиву: 

@Directive({
  selector: '[appCustomEdit]'
})

export class CustomEditDirective implements OnChanges {

  @Input() appCustomEdit: boolean;
  private element: any;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.element = el.nativeElement;
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.appCustomEdit.currentValue) {
      const btnElement = (<HTMLElement>this.element)
        .querySelector('.dx-link-save');

      this.renderer.listen(btnElement, 'click', () => {
        alert('Buton was clicked')
      });
    }
  }
}

в myComponent.html im, используя эту директиву: 

<div>
  <input [appCustomEdit]=true></input> 
</div>

мне нужноТеперь для реализации некоторого события / наблюдаемого, выведенного из директивы, чтобы я мог подписаться на него в myComponent.ts и выполнить некоторые действия.

Интересно, как это сделать?

Предложения?

1 Ответ

0 голосов
/ 07 октября 2018

Ну, прямой ответ на ваш вопрос будет выглядеть примерно так: 

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

@Directive({
    selector: '[appCustomInput]'
})
export class CustomInputDirective {

    @Output()
    myCustomEvent = new EventEmitter();

    @HostListener('click')
    onClick() {
        this.myCustomEvent.emit();
    }

}

А затем используйте его так: 

<div>
  <input appCustomInput (myCustomEvent)="onMyCustomEvent()"></input> 
</div>

Однако не совсем понятно, каковыВы пытаетесь достичь этого, поэтому я не могу сказать, так ли это на самом деле.

...