为什么带有 Angular Material Dialog 的 Angular 5 很慢? [英] Why is Angular 5 with Angular Material Dialog slow?

查看：21
本文介绍了为什么带有 Angular Material Dialog 的 Angular 5 很慢?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

嗨{{data.name}}
<div mat-dialog-content><p>你最喜欢的动物是什么?</p><mat-form-field><input matInput [(ngModel)]="data.animal"></mat-form-field>

<div mat-dialog-actions><button mat-button (click)="onNoClick()">不，谢谢</button><button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>好的</button>

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

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

解决方案

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

<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 Feeltittel"></mat-form-field>

</mat-tab><mat-tab label="ALTERNATIVER"><div class="field-tab-content">替代方案

</mat-tab><mat-tab label="VIS HVIS"><div class="field-tab-content">可见光

</mat-tab></mat-tab-group><mat-dialog-actions><div class="action-buttons"><button mat-raised-button color="accent" mat-dialog-close>否</button><button mat-raised-button color="primary">是</button>

</mat-dialog-actions></表单>

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

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

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

解决方案

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆