如何在角度材料2中以角度4打开对话框时禁用动画

Question

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

Answer 1

您可以通过导入禁用

NoopAnimationsModule

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})

更多信息 https://material.angular.io/guide/getting-started

Answer 2

如果您想将动画保留在应用程序上，但能够禁用附加到对话框的动画，您可以通过可以控制和禁用该容器内的所有动画的动画来覆盖对话框容器。

重写 OverlayContainer 组件

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

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

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