Как программно вызвать все матовые ряби?

Question

Итак, я узнал, как программно вызвать один волновой эффект, но как мне вызвать ВСЕ матовые ряби, присутствующие в шаблоне?

Я нашел здесь, как это сделать для одного (с помощью удобного стекаблица): https://stackoverflow.com/a/52959049/2362818

Спасибо.

Answer 1

Вы можете использовать ViewChildren и QueryList для запроса всех элементов в компоненте определенного типа.Затем вы можете выполнить итерацию по ним и вызвать launch ( или что-либо еще, что вам нужно ) для всех или любых элементов в коллекции.

Работающий stackblitz

---

list-Overview-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}));
  }
}

list-Overview-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>