如何在带有角4的角材料2中打开对话框时禁用动画 [英] How to disable animation while opening dialog in angular material 2 with angular 4

问题描述

我正在尝试创建对话框，但是问题是我想禁用对话框中的动画，以及如何禁用它.

I'm trying to create the dialog but problem is I want to disable the animation in the dialog so how to disable it.

推荐答案

如果您希望将动画保留在您的应用程序上，但能够禁用附加到对话框的动画，则可以用可以控制的对话框覆盖对话框容器并禁用该容器中的所有动画.

In case you want to keep your animations on your app but being able to disable the one attached to a dialog you can override the dialog container by one you can control and disable all the animations inside that container.

覆盖OverlayContainer组件

• 创建一个自定义的OverlayContainer，将其从cdk中扩展出来

• Create a custom OverlayContainer which extends the one from the cdk

import { OverlayContainer } from '@angular/cdk/overlay';

export class CustomOverlayContainer extends OverlayContainer {
    _defaultContainerElement: HTMLElement;

    constructor() {
        super();
    }

    public setContainer( container: HTMLElement ) {
        this._defaultContainerElement = this._containerElement;
        this._containerElement = container;
    }

    public restoreContainer() {
        this._containerElement = this._defaultContainerElement;
    }
}

在应用程序模块提供程序上通过自定义选项覆盖cdk OverlayContainer

Override the cdk OverlayContainer by the custom one on the app module providers

export function initOverlay() {
    return new CustomOverlayContainer();
}
@NgModule( {
     ...
     providers: [
         ...
         {
             provide: OverlayContainer,
             useFactory: initOverlay
         }
         ...
     ]
     ...
})

替换对话框包装器

访问新的对话框容器并替换默认对话框

Get access to the new dialog container and replace the default one

export class AppComponent implements AfterViewInit {
    @ViewChild( 'dialogContainer' ) dialogContainer: ElementRef;

    constructor( private dialog: MatDialog, private overlayContainer: OverlayContainer ) {
    }

    ngAfterViewInit() {
        (this.overlayContainer as CustomOverlayContainer).setContainer( this.dialogContainer.nativeElement );

        this.dialog.open( ... );
    }
}

禁用动画

将[@.disabled]绑定添加到您的容器中，以禁用其中发生的所有动画. https://angular.io/api/animations/trigger#disable-animations

Add the [@.disabled] binding to your container in order to disable all the animations happening inside it. https://angular.io/api/animations/trigger#disable-animations

<div #dialogContainer [@.disabled]="true"></div>

这篇关于如何在带有角4的角材料2中打开对话框时禁用动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！