时间戳

首页 > 解决方案 > 如何以编程方式触发 Angular MatListItem 的涟漪效应？

angular - 如何以编程方式触发 Angular MatListItem 的涟漪效应？

问题描述

在 Angular 材质中，许多组件都有可爱的涟漪效应。当您单击 mat-list-item 时，会发生涟漪效应。

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

有谁知道解决方法？我尝试从 MatListItem 的 _getHostElement() 调度“点击”，但无济于事。

编辑

感谢所有帮助过的人！我想最后我会设计我自己的列表组件，让我可以访问它的 MatRipple 指令。我已经分叉了 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

标签： angularangular-material

解决方案

在最新版本的 Material 中，现在有一个 Ripples 模块（此处的文档），它允许自定义和编程触发组件中的涟漪，例如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>

在组件中，我们抓取matRippleusing ViewChild，允许我们调用launch()波纹来触发实际的波纹效果：

@ViewChild(MatRipple) ripple: MatRipple;

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

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

推荐阅读