изменить BehaviorSubject при нажатии на вход или сосредоточиться на этом

Question

У меня есть директива для ввода. Мне нужно, когда щелкнуть или сосредоточиться на этом, отправить флаг другому компоненту.

@Directive({
  selector: '[appDatepicker]'
})
export class DatepickerDirective implements DoCheck{

  constructor(private el: ElementRef, private transport: TransportData<boolean>) {

  }

  ngDoCheck(): void {
    let element = this.el.nativeElement;
    if (element.onfocus !== null || element.onclick !== null) {
      this.transport.setListValue(true);
    } else {
      this.transport.setListValue(false);
    }
  }
}

, и это мой ввод.

<input appDatepicker>

, когда страница загружается, атрибут onfocus и onclick равен нулю, и он корректен, но моя проблема здесь: когда я нажимаю на ввод, он ничего не делает. Как я могу прослушать ввод в директиве для набора BehaviorSubject ?????

Answer 1

Для обработки событий хост-элемента в директиве вы можете использовать @HostListener.

@HostListener('focus', ['$event'])
focus(event) {
  console.log('gained focus');
}

@HostListener('click', ['$event'])
click(event) {
  console.log('clicked!');
}

@HostListener('blur', ['$event'])
blur(event) {
  console.log('lost focus');
}

DEMO: https://stackblitz.com/edit/angular-bg7rpl

Emitting events

Вы также можете отправлять собственные события из директивы, если вы sh.

directive.ts

@Output() myfocus: EventEmitter<void> = new EventEmitter<void>();

@HostListener('focus', ['$event'])
focus(event) {
  this.myfocus.emit();
}

компонент. html

<input appDatepicker (myclick)="onClick()" />