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

Angular material 角度材质按钮-如何启用悬停时的涟漪与复选框相同,angular-material,angular-material2,Angular Material,Angular Material2,我有两个并排的控制元素。一个是-和 检查我! 另一个是材质图标按钮 <button mat-icon-button> <mat-icon>home</mat-icon> </button> 家 当我们指向(悬停在)复选框时,它会在其周围显示一个灰色的圆形波纹(默认情况下) 但当我们指向按钮时,按钮的效果并不相同。为了保持这两个控件的一致性,我希望当用户指向(悬停在)图标按钮时,图标按钮上会产生相同的涟漪效果。涟漪需要在两个元

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

检查我!
另一个是材质图标按钮

  <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();
    }
}}