如何禁用動畫角質材料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>