角材质按钮 - 如何在悬停时启用波纹与复选框相同答案

【问题标题】：Angular material button - how to enable ripple on hover same as check box角材质按钮 - 如何在悬停时启用波纹与复选框相同
【发布时间】：2020-06-24 20:15:42
【问题描述】：

我有两个并排的控制元素。一个是 - 与here相同

<mat-checkbox>Check me!</mat-checkbox>

另一个是材质图标按钮

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

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

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

如何实现？

【问题讨论】：

标签： angular-material angular-material2

【解决方案1】：

您应该尝试使用指令来触发波纹。

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

我基于答案Angular 5 attribute directive add mat-ripple to host element & https://material.angular.io/components/ripple/overview

【讨论】：