Question

我正在尝试向一个按钮添加波纹效果，但是它会使整个网页崩溃。当我仅将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>

Answer 1

当您使用[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类中，因此不需要在CSS元素中添加position: relative。 Angular Material 8也是如此。

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

Answer 2

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

如果要识别白色，则由于使用绑定功能，因此必须将其作为字符串传递：

[matRippleColor]="'white'"

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

matRippleColor="white"