Как я могу программно вызвать волновой эффект на Angular MatListItem?

Question

В материале Angular вы получаете прекрасный эффект пульсации на многих компонентах.Когда вы нажимаете на элемент списка матов, возникает эффект пульсации.

Теперь с помощью кнопок и многих других компонентов вы можете запускать эффект пульсации с помощью button.ripple.launch(...), но с помощью элемента списков матов такой функциональности не вижу.,Я хотел бы иметь возможность сделать это, чтобы информировать пользователей об изменениях, внесенных в список.

Кто-нибудь знает об обходном пути?Я попытался отправить 'click' из _getHostElement () MatListItem, но безрезультатно.

EDIT

Спасибо всем, кто выручил!Я думаю, что в конце я просто создам свой собственный компонент списка, который дает мне доступ к его директиве 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

Вы можете попробовать динамическая переменная шаблона ссылки .Это работает для меня.

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: (

Answer 2

В последних версиях Material теперь есть модуль Ripples ( здесь ), который позволяет настраивать и программно запускать пульсации в компоненте, такие как 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});
}

Вот стэк-блиц , показывающий этот образец в действии;нажмите кнопку, чтобы вызвать рябь в mat-list.Естественно, вы можете переместить директиву matRipple к любому компоненту, если вы хотите, чтобы эффект ряби применялся к чему-то другому.Посмотрите документы, чтобы узнать больше вариантов конфигурации.