所以,我发现了如何以编程方式触发一个涟漪效应,但是如何触发模板中存在的所有涟漪?
我在这里找到了如何为一个人(使用方便的stackblitz):https://stackoverflow.com/a/52959049/2362818
谢谢。
您可以使用ViewChildren
和QueryList
查询特定类型组件中的所有元素。然后,您可以迭代它们并在集合中的所有或任何项目上调用launch
(或您需要的任何其他内容)。
列表概述 - example.ts
import {Component, ViewChildren, QueryList} from '@angular/core';
import {MatRipple} from '@angular/material';
@Component({
selector: 'list-overview-example',
templateUrl: 'list-overview-example.html',
styleUrls: ['list-overview-example.css'],
})
export class ListOverviewExample {
@ViewChildren(MatRipple)
ripple: QueryList<MatRipple>;
triggerRipple() {
this.ripple.forEach(_ => _.launch({centered: true}));
}
}
列表概述 - example.html的
<mat-list role="list">
<mat-list-item matRipple role="listitem">Item 1</mat-list-item>
<mat-list-item matRipple role="listitem">Item 2</mat-list-item>
<mat-list-item matRipple role="listitem">Item 3</mat-list-item>
</mat-list>
<button mat-raised-button color="accent" (click)="triggerRipple()">Trigger Ripple</button>