Angular material：控制代码的涟漪效应

Question

我知道我可以触发 div 的连锁反应，就像这样 demo

但这只适用于带有 ripple 指令的第一个元素。如果指令有两个元素，如下所示：

<div matRipple #rippleOne>
   rippleOne
</div>
<div matRipple #rippleTwo>
   rippleTwo
</div>

现在如何只触发第二个涟漪？试过这个：

@ViewChild(MatRipple)
rippleTwo: MatRipple;
...
this.rippleTwo.launch({});

这行不通。

还有

@ViewChild('rippleTwo')

行不通。正确的做法是什么？

Answer 1

read 选项应该可以解决问题：

@ViewChild('rippleTwo', { read: MatRipple })
rippleTwo: MatRipple;

另请参阅：

Angular material: control ripple effect from code