如何为所有焦点源设置相同的 md-checkbox 焦点轮廓

Question

当使用键盘聚焦 md-checkbox 时，它周围有轮廓。但是当以编程方式设置焦点时，没有视觉指示器。有什么办法让它看起来一样吗？

Answer 1

Ripple 是一个 click/focus 事件。如果您想在以编程方式设置复选框后产生连锁反应，则需要从代码中聚焦该元素。为此，您还需要为您的控件添加一个引用。

在您的模板中，将引用变量添加到您的复选框，例如customCheckbox:

<md-checkbox [(ngModel)]="checked" #customCheckbox>Check me!</md-checkbox>

... 在您的代码中，您需要在此控件上调用 focus() 方法：

// Import MdCheckbox in your ts file
import { MdCheckbox } from '@angular/material';

// Declare customCheckbox in your class
@ViewChild('customCheckbox') private customCheckbox: MdCheckbox;

// Use this line to focus the checkbox programmatically where you want.
this.customCheckbox.focus();

Link 到 working demo.

如何为所有焦点源设置相同的 md-checkbox 焦点轮廓

How to set same md-checkbox focus outline for all focus sources

angular-material

angular-material2

angular