Angular “如何倾听”；“聚焦”；关于角材质复选框

我想知道如何在Angular 4和Angular Material中实现以下功能：我想在用户聚焦材质复选框时显示一个小工具提示，因此我在模板中编写了以下内容：

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

我似乎没有通过这种方式从复选框中获取焦点事件。“材料文档”复选框告诉我：

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

到目前为止还不错，焦点事件似乎是通过内部复选框传播的，但是如何修改模板以侦听焦点事件呢

顺便说一句：我在处理mat单选按钮时也遇到了同样的问题

更新日期2017年11月2日 我设法找到了一个解决办法，灵感来源于。我使用RenderR2以编程方式注册deisred侦听器，如下所示：

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

这可以工作，但感觉不必要的复杂，因为我必须将Renderer2注入组件，并通过

ViewChild（）

定义复选框组件本身的句柄

---

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

我知道这是一个迟来的答案，但我偶然发现了同样的问题，在寻找解决方案时发现了这个问题。这里有一个评论 讨论

focusin

和

focusout

。您可以在

focusin

中进行操作。

工作起来很有魅力

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