如何禁用动画角质材料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

在你要保持你的动画在您的应用程序的情况下，但能够禁用一个附加到一个对话框，你可以通过一个对话框来覆盖对话框，你可以控制和禁用所有的动画该容器内的mations。

覆盖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由自定义一个所述一个自定义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>