如何在Angular MatListItem上以编程方式触发涟漪效果？

Question

在Angular Material中，许多组件都有美丽的水波纹效果。当您点击mat-list-item时，会发生水波纹效果。

现在，对于按钮和许多其他组件，您可以使用button.ripple.launch(...)触发水波纹效果，但是对于mat-list-item，我没有找到这样的功能。我希望能够通过此功能向用户通知列表所做的更改。

有人知道解决方法吗？我已经尝试从MatListItem的_getHostElement()中分派'click'，但无济于事。

编辑：

感谢所有帮助我的人！最终，我将设计自己的列表组件，以便可以访问其MatRipple指令。我已经fork了pr41的stackblitz，使情况与我拥有的情况类似（使用*ngFor生成列表），如果有人知道在这里放什么：

this.listChildren.map((item: MatListItem) => {
  // item is the MatListItem. How do I access its ripple directive?
});

那太好了！

分叉: https://stackblitz.com/edit/angular-mmjda4-ssoajs?file=app%2Flist-overview-example.ts

- Michael Beeson

Answer 1

最近版本的Material中，现在有一个涟漪模块(文档在此)，允许自定义和编程触发组件中的涟漪，例如mat-list-item。

编程触发涉及以下步骤： 首先，我们创建列表并附加matRipple指令。在我的示例中，我使用按钮单击来触发涟漪，因此还添加了事件处理程序：

<mat-list role="list" matRipple>
  <mat-list-item role="listitem">Item 1</mat-list-item>
  <mat-list-item role="listitem">Item 2</mat-list-item>
  <mat-list-item role="listitem">Item 3</mat-list-item>
</mat-list>
<button mat-raised-button color="accent" (click)="triggerRipple()">Trigger Ripple</button>

在组件中，我们使用ViewChild获取matRipple，这样就可以调用launch()方法来触发实际的涟漪效果：

@ViewChild(MatRipple) ripple: MatRipple;

triggerRipple() {
  this.ripple.launch({centered: true});
}

这里有一个 Stackblitz 示例，展示了这个样例的效果；点击按钮会在 mat-list 中发生涟漪效果。当然，如果你希望将涟漪效果应用到其他组件上，可以将 matRipple 指令移动到任何组件中。请查看文档以了解更多可用的配置选项。

- p4r1

---

非常感谢！我在Angular Material的涟漪网站上看到了这个。我的问题是，该列表是从*ngFor生成的（正如人们所期望的那样），我可以使用@ViewChildren访问MatListItem，并通过QuerySelector循环遍历它们。如果我要为每个MatListItem添加matRipple指令，我该如何访问特定MatListItem的MatRipple？ - Michael Beeson

我已经fork了你的stackblitz，使它处于与我自己相同的情况（你可以在我的编辑问题中看到它）- 我可以循环遍历matListItems，但不知道如何访问它们的ripple指令。 - Michael Beeson

Answer 2

你可以尝试使用 动态模板引用变量。对我来说很有效。

import { MatRipple } from '@angular/material/core';

export class FooComponent {
    @ViewChildren(MatRipple) rippleList: QueryList<MatRipple>;

    ngAfterViewInit() {
        let ripples = this.rippleList.toArray()
        ripples.forEach(res => {
                // res is the instance of each matRipple
        })
    }

}

但是让我困惑的是，我可以在我的项目中完美地使用它，但我无法在 stackblitz 中重现它 :(

- Eriice