angular - 在angular2的@contentChild中检测焦点事件的最佳方法是什么？

Question

假设我在 ng-content 标签之间有一个预计的原生输入。 我知道，我可以使用@ContentChild 获取对预计输入的引用。 我想知道我怎么能检测到例如父组件中投影输入元素的焦点事件？

Answer 1

没有办法。 focus事件不会冒泡，因此需要直接在元素上监听。

如果您可以使用@ContentChild() 获取引用，您可以使用

constructor(private renderer:Renderer) {}

someMethod() {
  this.renderer.invokeElementMethod(
    this.focusableChild.nativeElement, 
    'addEventListener', ['focus', onFocus.bind(this)]
  ); 
}

如果您控制组件的使用方式，您可以将指令应用于您的内容，如 How to realize website with hundreds of pages in Angular2 中所述。通过调度父元素可以收听的自定义事件将 focus 事件转发到冒泡事件

@Component({
  template: `... <ng-content></ng-content>
  ...
})
class MyComponent {
  @HostBinding('custom-focus', ['$event'])
  onFocus(event) {
    ...
  }
}