Как программно запустить все матовые пульсации?

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

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

Спасибо.

Пожалуйста, покажите нам свою попытку кода

Bussller 27.02.2019 16:30
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
516
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать 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>

Работает просто отлично. Спасибо!

brunomfv 27.02.2019 16:54

Другие вопросы по теме