Angular Material mat-ripple 不起作用答案

【问题标题】：Angular Material mat-ripple isn't workingAngular Material mat-ripple 不起作用
【发布时间】：2020-07-23 12:59:50
【问题描述】：

我正在尝试为一个按钮添加涟漪效果，但它会使整个网页崩溃。当我将matRipple 添加到我的按钮时，什么也没有发生。当我尝试添加颜色 [matRippleColor]="white" 时，我得到 “无法绑定到 'matRippleColor'，因为它不是 'button' 的已知属性”。

这很奇怪，因为我在网站的其他页面上启用了涟漪，它工作得很好。（所以是的，我已经导入了 MatRippleModule）：

HTML：

<button  matRipple class="submit-button" color="accent" type="submit" >
  <mat-icon>search</mat-icon><span>Szukaj</span>
</button>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

这是因为输入属性 matRippleColor 需要一个字符串，并且您传递了一个 Angular 假设您之前已初始化的变量，在这种情况下，您有一个我认为您的组件中不存在的变量。

如果您想识别白色，则必须将其作为字符串传递，因为您使用的是绑定功能：

[matRippleColor]="'white'"

或者您可以删除大括号并像这样使用它：

matRippleColor="white"

【讨论】：

都不适合我。当我尝试为涟漪设置颜色时，页面仍然冻结。更多的是，在我的其他页面上，我只使用了 matRipple [matRippleColor]="white" 并且它按预期工作。（您可以在主题的屏幕截图中看到结果）。

【解决方案2】：

当你使用[matRippleColor]="white" 时，Angular 会将"white" 计算为一个模板表达式。由于您尚未在组件中定义变量 white，因此计算结果为 undefined。如果要将白色传递给[matRippleColor]，则需要将其作为字符串传递，如下所示

<button matRipple [matRippleColor]="'white'" type="submit" class="submit-button">
    <mat-icon>search</mat-icon><span>Szukaj</span>
</button>

问题也可能与您使用的@angular/material 版本有关。 MatRippleModule 对于@angular/material 的不同版本的工作方式略有不同

MatRippleModule 是在 Angular Material 6 中引入的，因此它不适用于版本 5 及以下版本。

在 Angular Material 6 中，波纹溢出到元素之外。这可以通过将position: relative 添加到您的元素 CSS 来解决，如下所示

.submit-button {
    position: relative;
}

在 Angular Material 7 中，position: relative CSS 属性已添加到库的 .mat-ripple 类中，因此不需要将 position: relative 添加到 CSS 中的元素。 Angular Material 8 也是如此。

这是 Angular 7 上 StackBlitz 的一个简单示例，您可以在其中动态更改颜色。对于恒定颜色，只需将[matRippleColor]="rippleColor" 更改为[matRippleColor]="'white'" 或您选择的任何颜色。

【讨论】：

不幸的是它没有用。更重要的是，在我的另一页上，我只使用了一个“白色”，它起作用了！（您在主题的屏幕截图中看到的结果）。
@Lbovsky 我已经编辑了我的答案并在 Stackblitz 添加了一个工作示例。