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 { }

Answer 3

作为一个稍微简单的选择，如果您只想完全禁用波纹效果，则不需要const globalRippleConfig，只需将其内联即可。

所以import看起来像这样：

// maybe '@angular/material' below depending on your material version
import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material/core';

和NgModule中的

：

providers: [
    { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled:true} },
    // and any other providers here
],

禁用全局涟漪效应angular 2 app

3 个答案: