如何以编程方式触发 Angular MatListItem 上的涟漪效应?

Question

在Angular 材质中，你对很多组件都有可爱的涟漪效应。当您单击垫子列表项时，会发生涟漪效应。

现在有了按钮和许多其他组件，您可以使用button.ripple.launch(...)触发涟漪效应，但是使用 mat-list-item，我看不到这样的功能。我希望能够这样做来通知用户对列表所做的更改。

有谁知道解决方法？我试过从 MatListItem 的 _getHostElement(( 中调度"点击"，但无济于事。

编辑

感谢所有帮助过的人！我想最后我会设计我自己的列表组件，让我可以访问它的 MatRipple 指令。我已经分叉了pr41的堆栈闪电战，以使情况与我的情况相似(使用* 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

Answer 1

从最新版本的材料开始，现在有一个波纹模块(文档在这里(，允许自定义和编程触发组件中的波纹，例如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});
}

下面是一个堆栈闪电战，显示了此示例的实际效果;单击该按钮可在mat-list中引起涟漪。当然，如果您希望将涟漪效应应用于其他内容，您可以将matRipple指令移动到任何组件。查看文档，了解更多可用的配置选项。

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

但是令我感到困惑的是，我可以在我的项目中完美地使用它，但我无法在堆栈闪电战中重新出现它：(