如何在 Mat Chip Angular 中编辑 Mat Ripples 属性答案

【问题标题】：How to edit Mat Ripples properties in Mat Chip Angular如何在 Mat Chip Angular 中编辑 Mat Ripples 属性
【发布时间】：2018-10-24 02:11:15
【问题描述】：

我正在开发一个在数据表中使用垫芯片的 Angular 应用程序。但是，表中的数据存储在数据库中，并通过 HTTP 调用进行检索。因此，当我单击删除按钮时，波纹会一直延伸，直到表格刷新并且它会变得非常大。

有没有办法修改垫片或其他 Angular Material 元素的波纹半径？我知道我可以禁用它，但最好修改半径。

【问题讨论】：

我很好奇你的涟漪过大的原因。如果可以，请创建一个带有复制的堆栈闪电战，以便我们找到根本原因。
我正在等待后端回答，然后再进行任何类型的修改。即使它在 localHost 上也可能需要 0.2-0.3 秒，在此期间波纹会相应扩大。我尝试在后端放置一个计时器，仅在 2 秒后返回，它会增长大约 1.5 秒，然后稳定在最大大小，然后保持这种状态，直到我们刷新表格

【解决方案1】：

我不确定它是何时引入的，但从 Material 版本 6.4.7 开始，添加了 Ripples module 以更精细地控制波纹的行为，允许定义波纹半径、颜色等。使用这个新模块，您应该能够禁用每个组件的原生涟漪效应并使用您自己的组件进行覆盖：

<mat-chip disableRipple matRipple matRippleRadius="10">One fish</mat-chip>

如果不禁用组件的原生波纹，每次点击都会产生两个波纹。

【讨论】：

谢谢，它的工作原理，但行为怪异。我禁用了 mat-chip 中的波纹，并尝试将其添加到 mat-icon 上以进行内部删除。但是，当我单击图标时，如果属性 matRippleCentered 为 true，则波纹会出现在芯片的另一端。