Question

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

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

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

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

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

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

到目前为止，似乎焦点事件是由内部复选框传播的，但我如何修改模板以收听焦点事件？

顺便说一句：处理mat-radio-button

时遇到同样的问题

更新02.11.2017 我设法找到了一个受Dynamically add event listener in 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中进行操作。 Stackblitz

如何在Angular Material Checkbox上听“onFocus”

1 个答案: