angular - 如何在 Angular Material 复选框上收听 "onFocus"

Question

我想知道如何在 Angular 4 和 Angular Material 中进行以下操作:我想在用户关注 Material Checkbox 时显示一个小工具提示，所以我在我的模板中写了以下内容:

<mat-checkbox (focus)="foo()">Test</mat-checkbox>

在相应的组件中， foo 方法只是提醒用户(仅用于测试):

sayHello() {
    alert('Hallo Welt');
}

似乎我没有以这种方式从复选框中获取焦点事件。 Material Checkbox 的文档告诉我:

The mat-checkbox uses an internal input type="checkbox" to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the mat-checkbox element.

到目前为止一切顺利，似乎焦点事件是由内部复选框传播的，但是我如何修改我的模板来监听焦点事件呢？

顺便说一句:我在处理 mat-radio-button 时遇到同样的问题

2017 年 2 月 11 日更新
我设法找到了受 Dynamically add event listener in Angular 2 启发的解决方法.我使用 Renderer2 以编程方式注册 deisred 监听器，如下所示:

const nativeElement = this.checkboxComponent._inputElement.nativeElement;
this.renderer.listen(nativeElement, 'focus', () => {
  this.tooltip.showTooltip();
});

这可行，但感觉不必要地复杂，因为我必须将 Renderer2 注入(inject)组件并通过 ViewChild() 定义复选框组件本身的句柄.

我可以想象这个简单的用例必须有一个更简单的方法？

Answer 1

我知道这是一个迟到的答案，但我偶然发现了同样的问题，在寻找解决方案时发现了这个问题 1723 .这里评论
谈focusin和 focusout .您可以在focusin 中进行操作.
Stackblitz