为什么带有 Angular Material Dialog 的 Angular 5 很慢？

Question

如果它包含多个按钮和一个文本字段，则从 Angular Material 打开一个对话框会很慢。 我做了一个stackblitz来说明问题。

如果对话框包含以下 html，则会快速动画：

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

就我而言，我有一个包含表单和一些选项卡的 html 结构。如果我删除表单标签，对话框会打开得更快一些，但不够快也不够流畅。如果我从 html 中删除选项卡，对话框将像 Angular Material 提供的示例一样流畅地打开。有什么办法可以让对话框打开得更快吗？通过添加NoopAnimationsModule，我可以打开没有滞后动画的对话框，这很好，但是我的应用程序中的其他一些动画也停止工作了。

我找到了this issue on gitHub，但该线程中提供的 hack 对我不起作用

Answer 1

之所以慢，是因为你的模板文件有错误

<form #fieldEditForm class="schema-dialog">
  <mat-tab-group backgroundColor="primary" [@.disabled]="true">
    <mat-tab label="VISNING">
      <div class="field-tab-content visning-tab-content">
        <mat-form-field>
          <input matInput formControlName="subject" placeholder="Skriv en felttittel">
        </mat-form-field>
      </div>

    </mat-tab>
    <mat-tab label="ALTERNATIVER">
      <div class="field-tab-content">
        ALTERNATIVER
      </div>
    </mat-tab>
    <mat-tab label="VIS HVIS">
      <div class="field-tab-content">
        VIS HVIS
      </div>
    </mat-tab>
  </mat-tab-group>
  <mat-dialog-actions>
    <div class="action-buttons">
      <button mat-raised-button color="accent" mat-dialog-close>No</button>
      <button mat-raised-button color="primary">Yes</button>
    </div>
  </mat-dialog-actions>
</form>

formControlName="subject" 导致错误，您必须在您的类中声明一个 FormGroup 属性并将 [formGroup]="'name_of_your_property'" 添加到您的表单，删除 formControlName="subject" 将解决您的问题。

在此处导航如何使用 ReactiveForms https://angular.io/guide/reactive-forms