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

问题描述

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

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.

编辑

感谢所有提供帮助的人！我想最后我会设计我自己的列表组件，让我可以访问它的 MatRipple 指令.我已经对 pr41 的 stackblitz 进行了分叉，以使情况与我所拥有的情况类似(使用 *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 上的涟漪效应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！