如何以编程方式触发Angular MatListItem上的波纹效果? [英] How can I programmatically trigger ripple effect on Angular MatListItem?

问题描述

在Angular材料中，许多组件具有漂亮的波纹效果.当您单击一个垫子列表项时，会发生波纹效果.

In Angular material you have the lovely ripple effect on a lot of the components. When you click on a mat-list-item the ripple effect happens.

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

Now with buttons and many other components you can trigger the ripple effect with button.ripple.launch(...) but with mat-list-item I see no such functionality. I'd like to be able to do it to inform users of changes made to the list.

有人知道解决方法吗?我尝试从MatListItem的_getHostElement()调度点击"，但无济于事.

Does anyone know of a workaround? I've tried dispatching 'click' from the MatListItem's _getHostElement(), but to no avail.

编辑

感谢所有得到帮助的人！我认为最后我将只设计自己的list组件，使我可以访问其MatRipple指令.我已将pr41的堆栈闪电分叉，以使情况类似于我的情况(使用* ngFor生成的列表)，以及是否有人知道在此处放置什么内容:

Thanks to everybody who's helped out! I think in the end I'll just design my own list component that gives me access to its MatRipple directive. I've forked pr41's stackblitz to have the situation be similar to what I have (a list generated with *ngFor) and if anyone knows what to put here:

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

推荐答案

从Material的最新版本开始，现在有一个Ripples模块(此处的文档)，允许对组件(例如mat-list-item)中的波纹进行自定义和编程触发.

As of recent versions of Material, there is now a Ripples module (docs here) that allow for the customization and programmatic triggering of ripples in a component, such as mat-list-item.

程序化触发涉及以下内容: 首先，我们列出清单并附加matRipple指令.在我的示例中，我使用按钮单击来触发波纹，因此还添加了一个事件处理程序:

Programmatic triggering involves the following: First, we make our list and attach the matRipple directive. In my example, I'm using a button click to trigger the ripple, so an event handler has been added as well:

<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()来触发实际的波纹效果:

Within the component, we grab the matRipple using ViewChild, allowing us to call launch() on the ripple to trigger the actual ripple effect:

@ViewChild(MatRipple) ripple: MatRipple;

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

这是一个显示此内容的stackblitz 实际样本；单击该按钮会在mat-list中引起波动.当然，如果您希望将涟漪效应应用于其他组件，可以将matRipple指令移至任何组件.查看文档以获取更多可用的配置选项.

Here's a stackblitz showing this sample in action; click the button to cause a ripple in the mat-list. Naturally, you can move the matRipple directive to any component if you'd like the ripple effect applied to something else. Take a look at the docs for more configuration options available.

这篇关于如何以编程方式触发Angular MatListItem上的波纹效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！