Warum ist der Winkel 5 mit Winkel Material-Dialog langsam?

Öffnen ein Dialogfeld, Kantige Material ist langsam, wenn es mehr enthält, als ein paar buttons und ein Textfeld.
Ich machte eine stackblitz um das problem zu veranschaulichen.

Den dialog animiert schnell, wenn es enthält die folgenden html-Code:

<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 meinem Fall, ich habe eine html-Struktur, die ein Formular enthält und einige Registerkarten. Wenn ich entfernen Sie das form-tag, öffnet sich der dialog etwas schneller, aber nicht schnell noch glatt genug. Wenn ich entfernen Sie die Laschen aus dem html -, öffnet sich der dialog so glatt wie das Beispiel Eckig Material. Gibt es irgendetwas, was ich tun kann, damit der dialog geöffnet ist schneller? durch hinzufügen NoopAnimationsModule ich kann öffnen Sie den dialog, ohne die animation laggt, was in Ordnung ist, aber dann einige andere Animationen in meine Anwendung nicht so gut funktioniert.

Fand ich dieses Problem ist auf gitHub, aber der hack in diesem thread funktioniert bei mir nicht

  • Nachdem ich ein Upgrade auf Eckige und Kantige Material 6.0.1, die Animationen waren nicht langsam mehr.
InformationsquelleAutor John | 2018-04-21



One Reply
  1. 1

    Der Grund, warum es langsam ist weil es Fehler sind in deinem template-Datei

    <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“ die den Fehler verursacht haben, müssen Sie deklarieren eine FormGroup Eigenschaft in der Klasse, und fügen Sie [formGroup]=“’name_of_your_property'“ zu Ihrer form, entfernen formControlName=“subject“ wird Ihr Problem zu beheben.

    navigieren Sie hier wie zu verwenden ReactiveForms https://angular.io/guide/reactive-forms

    • Danke für deine Antwort, es scheint, dass es war der Grund für die langsame animation in der stackblitz. Ich habe eine langsame dialog in einem anderen Programm von mir, so dass ich dachte, ich würde versuchen, das problem zu reproduzieren. Ich erhalte keine Fehler gibt, aber wie es aussieht, war ich zu schnell copy paste von meinen anderen Anwendung. Scheint, das problem liegt woanders. Trotzdem danke

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.