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

Posted 2023-02-22

技术标签:

【中文标题】Angular 材质：从代码中控制涟漪效应【英文标题】：Angular material: control ripple effect from code 【发布时间】：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;

另见：

How to get reference of the component associated with ElementRef in Angular 2

【讨论】：

以上是关于Angular 材质：从代码中控制涟漪效应的主要内容，如果未能解决你的问题，请参考以下文章