这个问题可能是因为使用了:focus伪类来应用样式,而它也被应用到了Mat-Chip组件上。解决这个问题的方法是使用Angular CDK提供的:focusable属性。
示例代码:
HTML:
TS: import { FocusableOption } from '@angular/cdk/a11y';
@Component({ ... }) export class ChipComponent implements OnInit, FocusableOption { readOnly = false;
constructor(private elementRef: ElementRef) {}
ngOnInit() {}
focus() { this.elementRef.nativeElement.focus(); } }
样式: .mat-chip-focus { background-color: #e0e0e0; }
这里我们使用了FocusableOption接口来让组件变成可获取焦点,同时使用:focusable属性来实现Mat-Chip组件的选中效果。也可以使用:focus-within来替代:focus来避免子元素受到影响。