为什么Angular 5和Angular Material对话框较慢? [英] Why is Angular 5 with Angular Material Dialog slow?

问题描述

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

Opening a dialog from Angular Material is slow if it contains more than a few buttons and a text field. I made a stackblitz to illustrate the problem.

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

The dialog animates fast if it contains the following 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，我可以打开没有动画的对话框，这很好，但是随后我的应用程序中的其他一些动画也将停止工作.

In my case, I have a html structure that contains a form and some tabs. If I remove the form-tag, the dialog opens a bit faster, but not fast nor smooth enough. If I remove the tabs from the html, the dialog opens as smooth as the example provided by Angular Material. Is there anything I can do to make the dialog open faster? by adding NoopAnimationsModule I can open the dialog without the laggy animation, which is fine, but then some other animations in my application stops working as well.

我在gitHub上发现了此问题，但是该线程中提供的hack确实可以不适合我

I found this issue on gitHub, but the hack provided in that thread does not work for me

推荐答案

之所以变慢，是因为模板文件中存在错误

The reason why it is slow because, there are errors in your template file

<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" 将解决您的问题.

formControlName="subject" causes the error, you have to declare a FormGroup property in your class and add [formGroup]="'name_of_your_property'" to your form, removing formControlName="subject" will resolve your issue.

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

navigate here how to use ReactiveForms https://angular.io/guide/reactive-forms

这篇关于为什么Angular 5和Angular Material对话框较慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！