时间戳

首页 > 解决方案 > 单击输入或关注该输入时更改 BehaviorSubject

javascript - 单击输入或关注该输入时更改 BehaviorSubject

问题描述

我有一个输入指令。我需要当点击或关注它时，向其他组件发送一个标志。

@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它是正确的，但我的问题在这里：当我点击输入时它没有做任何事情。我如何在 set 指令中收听输入BehaviorSubject？？？？

标签： javascriptangulartypescript

解决方案

要在指令中处理宿主元素事件，您可以使用@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');
}

演示：https ://stackblitz.com/edit/angular-bg7rpl

发射事件

如果您愿意，您也可以从指令中发出自己的事件。

指令.ts

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

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

组件.html

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

推荐阅读