首页 文章

为什么带有Angular Material Dialog的Angular 5会变慢?

提问于
浏览
0

如果Angular Material包含多个按钮和一个文本字段,则从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结构 . 如果我删除了form-tag,对话框会打开得更快,但不够快,也不够平滑 . 如果我从html中删除选项卡,对话框将像Angular Material提供的示例一样平滑打开 . 有什么办法可以让对话框更快地打开吗?通过添加 NoopAnimationsModule 我可以打开没有滞后动画的对话框,这很好,但是我的应用程序中的一些其他动画也停止工作 .

我找到this issue on gitHub,但该线程中提供的黑客对我不起作用

1 回答

  • 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

相关问题