angular - 如何在带有 Angular 4的 Angular Material 2中打开对话框时禁用动画

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

最佳答案

如果您希望将动画保留在您的应用程序上，但能够禁用附加到对话框的动画，则可以用一个替代对话框容器，您可以控制和禁用该容器中的所有动画。

覆盖OverlayContainer组件

创建一个自定义的OverlayContainer，从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

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

替换对话框包装

获取对新对话框容器的访问权限并替换默认对话框容器

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]绑定(bind)添加到您的容器中，以禁用其中发生的所有动画。 https://angular.io/api/animations/trigger#disable-animations

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