Disable globally ripple effect angular 2 app

问题

I have an app which is using material 2, i would like to globally disable the ripple effect for all components or directives that use it. I don't want to do this overriding css classes. One thing that comes in my mind is creating a directive which can extend MdRipple and then override its properties, not sure tho. I would like to know your opinion or example how this can be done in the right way.

回答1:

Import ripple specific token and interface

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

then create config

const globalRippleConfig: RippleGlobalOptions = {disabled: true};

then add new provider to your main NgModule

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

With MD_RIPPLE_GLOBAL_OPTIONS you can also configure ripple size, color, animation speed

回答2:

The provider changed in recent versions. You need to use MAT_RIPPLE_GLOBAL_OPTIONS not MD_RIPPLE_GLOBAL_OPTIONS.

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

回答3:

As a slightly simpler alternative, if you only want to disable the ripple effect completely, you don't need a const globalRippleConfig, you can just put it inline.

So the import looks like this:

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

and in NgModule:

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

来源：https://stackoverflow.com/questions/43078270/disable-globally-ripple-effect-angular-2-app

标签

angular

material-design