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

问题描述

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

解决方案

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

覆盖 OverlayContainer 组件

• 创建一个自定义 OverlayContainer，它扩展了 cdk 中的 OverlayContainer

  import { OverlayContainer } from '@angular/cdk/overlay';导出类 CustomOverlayContainer 扩展 OverlayContainer {_defaultContainerElement: HTMLElement;构造函数(){极好的();}公共 setContainer(容器:HTMLElement){this._defaultContainerElement = this._containerElement;this._containerElement = 容器；}公共恢复容器(){this._containerElement = this._defaultContainerElement;}}

• 通过应用模块提供程序上的自定义覆盖 cdk OverlayContainer

  导出函数 initOverlay() {返回新的 CustomOverlayContainer();}@NgModule({...供应商: [...{提供:OverlayContainer，使用工厂:initOverlay}...]...})

替换对话框包装器

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

导出类 AppComponent 实现 AfterViewInit {@ViewChild('dialogContainer') dialogContainer: ElementRef;构造函数(私有对话框:MatDialog，私有overlayContainer:OverlayContainer){}ngAfterViewInit() {(this.overlayContainer as CustomOverlayContainer).setContainer( this.dialogContainer.nativeElement );this.dialog.open(...);}}

禁用动画

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

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.

Override OverlayContainer component

• 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;
      }
  }
  

• 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
           }
           ...
       ]
       ...
  })
  

Replace the dialog wrapper

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( ... );
    }
}

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屋！