如果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 回答
它之所以慢,是因为模板文件中存在错误
formControlName="subject" 导致错误,您必须在类中声明FormGroup属性并将 [formGroup]="'name_of_your_property'" 添加到表单中,删除 formControlName="subject" 将解决您的问题 .
在这里导航如何使用ReactiveForms https://angular.io/guide/reactive-forms