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

从Material的最新版本开始，现在有了Ripples模块（docs here），该模块可以自定义和以编程方式触发组件中的波纹，例如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>

在组件内，我们使用matRipple抓取ViewChild，从而允许我们在波纹上调用launch()来触发实际的波纹效果：

@ViewChild(MatRipple) ripple: MatRipple;

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

Here's a stackblitz显示该示例的实际操作；单击该按钮会在mat-list中引起波动。当然，如果您希望将涟漪效应应用于其他组件，可以将matRipple指令移动到任何组件。查看文档以获取更多可用的配置选项。

Answer 2

您可以尝试dynamic template reference variable。它对我有用。

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中重新出现它：（

如何以编程方式触发Angular MatListItem上的波纹效果？

2 个答案: