禁用全局涟漪效应angular 2 app

Question

我有一个使用材料2的应用程序,我想全局禁用所有使用它的组件或指令的涟漪效应.我不想这样做覆盖css类.我想到的一件事是创建一个指令,它可以扩展MdRipple,然后覆盖它的属性,不确定.我想知道您的意见或示例如何以正确的方式完成.

Answer 1

导入ripple特定令牌和接口

import { MD_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from '@angular/material';

然后创建配置

const globalRippleConfig: RippleGlobalOptions = {disabled: true};

然后在主NgModule中添加新的提供程序

providers: [{provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig}]

使用MD_RIPPLE_GLOBAL_OPTIONS,您还可以配置纹波大小,颜色,动画速度

Answer 2

提供程序在最新版本中已更改。您需要使用MAT_RIPPLE_GLOBAL_OPTIONS而不是MD_RIPPLE_GLOBAL_OPTIONS。

更新您的AppModule.ts

...

import {  MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from '@angular/material';

const globalRippleConfig: RippleGlobalOptions = {
  disabled: true
};

@NgModule({
  imports:      [
    ...
    ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue:     globalRippleConfig}]
})
export class AppModule { }