如何在 Angular Material 复选框上收听“onFocus”

Question

我想知道如何在 Angular 4 和 Angular Material 中使用以下内容：我想在用户聚焦 Material Checkbox 时显示一个小工具提示，所以我在我的模板中写了以下内容：

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

在相应的组件中， foo 方法只是提醒用户（仅用于测试）：

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

似乎我没有通过这种方式从 Checkbox 获得焦点事件。Material Checkbox 的文档告诉我：

mat-checkbox 使用内部输入 type="checkbox" 来提供可访问的体验。此内部复选框接收焦点并由 mat-checkbox 元素的文本内容自动标记。

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

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

2017 年 11 月 2 日更新 我设法找到了一种受在 Angular 2 中动态添加事件侦听器启发的解决方法。我使用 Renderer2 以编程方式注册 deisred 侦听器，如下所示：

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

这有效但感觉不必要地复杂，因为我必须将 Renderer2 注入组件并通过ViewChild().

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

Answer 1

我知道这是一个迟到的答案，但我偶然发现了同样的问题，在寻找解决方案时发现了这个问题1723。这里的评论讨论了focusin和focusout。您可以在 中采取行动focusin。 斯塔克闪电战