首页 文章

如何在Angular Material Checkbox上收听“onFocus”

提问于
浏览
2

我想知道如何在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时我遇到了同样的问题

Update 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() 定义复选框组件本身的句柄 .

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

1 回答

  • 0

    我知道这是一个迟到的答案,但我偶然发现同样的问题,在寻找解决方案的同时发现了这个问题1723 . 这里的评论谈到 focusinfocusout . 你可以在 focusin 进行你的行动 . Stackblitz

相关问题