Angular2 材质中的 Md-ripple答案

【问题标题】：Md-ripple in Angular2 MaterialAngular2 材质中的 Md-ripple
【发布时间】：2017-05-15 00:49:56
【问题描述】：

我在任何地方都没有找到任何关于如何使用 ng2 材料中的 md-ripple 的信息。

试过

<button md-ripple-foreground class="loginButton"></button>

或

<button md-ripple-fade-in class="loginButton"></button>

或

<button md-ripple class="loginButton"></button>

但它们都没有真正起作用。如何开启？

如果你不知道波纹是如何工作的：https://codepen.io/Craigtut/pen/dIfzv

https://github.com/angular/material2/tree/master/src/lib/core/ripple

【问题讨论】：

Try 可以只在你的按钮中使用 md-button 指令。它会为你增添涟漪
<button md-raised-button md-ripple-fade-in type="button" ></button> 还是不行 :( @benny_boe
@H.Doe 但您提供的最后一个链接实际上解释了您必须如何使用它。
@PierreDuc 我按照说明进行操作，但不知何故它不起作用......

标签： javascript angular material-design angular-material2

【解决方案1】：

您必须在元素中定义[mdRippleColor] 或[mdRippleBackgroundColor]。否则默认为css背景色，你不会看到任何效果：

<button md-ripple class="loginButton" mdRippleColor="#F00"></button>

【讨论】：

默认颜色为灰色，我对此无能为力。 mdRippleColor="#F00" 不起作用。
您是否在应用模块中导入了 mdRippleModule？然后为我工作......只需要弄清楚如何改变悬停颜色：/

【解决方案2】：

const globalRippleConfig: RippleGlobalOptions = {
  disabled: false,
  baseSpeedFactor: 1.5 // Ripples will animate 50% faster than before.
};

和

<style>
    .ripple{
      position: relative;
     }
  </style>
 <div class="ripple" md-ripple>
 </div>

【讨论】：

【解决方案3】：

遇到同样的问题，我就是这样解决的 - 我想在 MdCard 中实现它并且它有效。

在 app.module.ts 中，或者你的模块文件所在的任何地方 ->

import { MdRippleModule } from '@angular/material';

不要忘记在同一文件中的 @NgModule 内的导入中声明

imports: [ MdRippleModule ]

现在直接前往您要实施涟漪效应指令的标记

在我的例子中：

<md-card
  md-ripple
  mdRippleColor="#00E4AC">
Content 
</md-card>

有关更像mdRippleColor性质在实施例中使用上述的，请参阅此链接：HTTPS：̶/̶/̶g̶i̶t̶h̶u̶b̶.̶c̶o̶m̶/角度/材料2 / BLOB /主/ SRC / LIB /核心/脉动/̶R̶E̶A̶D̶M̶E̶.̶m̶d̶＃API -̶s̶u̶m̶m̶a̶r̶y̶（由于版本升级，链接不再可用）

【讨论】：

请注意，如果您的版本高于 beta.11，则不再支持此答案
Angular Material 4 和 5 的最新解决方案：stackoverflow.com/a/46468995
对于 ng6，只需将 'Md' 替换为 'Mat' 就可以了。干杯！