在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)]
  ); 
}

如果您控制组件的使用方式,您可以将指令应用于您的内容,如如何在Angular2中实现包含数百个页面的网站中所述,focus通过调度父元素可以监听的自定义事件将事件转发到冒泡事件

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