Angular material 角度材质按钮-如何启用悬停时的涟漪与复选框相同

我有两个并排的控制元素。一个是-和

检查我！

另一个是材质图标按钮

  <button mat-icon-button>
    <mat-icon>home</mat-icon>
  </button>

家

当我们指向（悬停在）复选框时，它会在其周围显示一个灰色的圆形波纹（默认情况下）

但当我们指向按钮时，按钮的效果并不相同。为了保持这两个控件的一致性，我希望当用户指向（悬停在）图标按钮时，图标按钮上会产生相同的涟漪效果。涟漪需要在两个元素上具有相同的圆形、相同的颜色和相同的大小

---

如何实现这一点？

您应该尝试使用指令触发涟漪

@Directive({
selector: '[rippleOnHover]',
providers: [MatRipple]})

rippleRef;
constructor(
    private _elementRef: ElementRef,
    private ripple: MatRipple
) {}
@HostListener('mouseenter') onMouseEnter(): void {
    if (this._elementRef && this._elementRef.nativeElement) {
        this._elementRef.nativeElement.style.overflow = 'hidden';
    }
    
    if (this.ripple) {
        this.rippleRef = this.ripple.launch({ centered: true, persistent: true });
    }
}
@HostListener('mouseleave') onMouseLeave(): void {
    if (this.rippleRef) {
        this.rippleRef.fadeOut();
    }
}}

我的答案是,

@Directive({
selector: '[rippleOnHover]',
providers: [MatRipple]})

rippleRef;
constructor(
    private _elementRef: ElementRef,
    private ripple: MatRipple
) {}
@HostListener('mouseenter') onMouseEnter(): void {
    if (this._elementRef && this._elementRef.nativeElement) {
        this._elementRef.nativeElement.style.overflow = 'hidden';
    }
    
    if (this.ripple) {
        this.rippleRef = this.ripple.launch({ centered: true, persistent: true });
    }
}
@HostListener('mouseleave') onMouseLeave(): void {
    if (this.rippleRef) {
        this.rippleRef.fadeOut();
    }
}}