Angular 材质：从代码中控制涟漪效应答案

【问题标题】：Angular material: control ripple effect from codeAngular 材质：从代码中控制涟漪效应
【发布时间】：2019-03-31 08:55:17
【问题描述】：

我知道我可以在 div 上触发涟漪效应，例如 demo

但这仅适用于具有波纹指令的第一个元素。如果指令中有两个元素，如下所示：

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

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

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

这行不通。

还有

@ViewChild('rippleTwo')

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

【问题讨论】：

【解决方案1】：

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

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

另见：

【讨论】：