单击后保留 Angular Material Mat 波纹动画

Question

我将 mat-list 与 matRipple 一起用于点击动画。通常，垫波纹动画会在一段时间后消失，可以使用 RippleGlobalOptions 进行控制，但我想在单击后保留动画，这样背景颜色就不会改变。那么，有什么方法可以保持背景风格吗？

    <mat-list #selectable
              role="list">
                <mat-list-item *ngFor="let item of ItemsSource; let i = index;"
                               (click)="OnRowClicked(item)"
                               role="listitem"
                               matRipple>
                    {{item["Description"]}}
                    <mat-divider></mat-divider>
                </mat-list-item>
    </mat-list>

  public ItemsSource = [{Description: "test", Code: "1" },
                        {Description: "test2", Code: "2" }];

  public SelectedItem: any;

  public OnRowClicked(event: any) {
      this.SelectedItem = event;
    }  

分叉：https://stackblitz.com/edit/angular-vrus3x

Answer 1

您可以使用 Manual Ripples.

class MyComponent {

  /** Reference to the directive instance of the ripple. */
  @ViewChild(MatRipple) ripple: MatRipple;

  /** Shows a centered and persistent ripple. */
  launchRipple() {
    const rippleRef = this.ripple.launch({
      persistent: true,
      centered: true
    });

    // Fade out the ripple later.
    rippleRef.fadeOut();
  }
}

这是我在 google 上找到的 stackblitz。