Why is Angular 5 with Angular Material Dialog slow?

问题

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.

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>

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.

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

回答1:

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" 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.

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

来源：https://stackoverflow.com/questions/49953801/why-is-angular-5-with-angular-material-dialog-slow

标签

angular

angular-material2