Verstehen Sie den Änderungserkennungsmechanismus (Change Detection) in Angular

Empfohlene verwandte Tutorials: „angular Tutorial“

Problemphänomen

Während des Entwicklungsprozesses bin ich auf das Problem gestoßen, dass die Daten auf der Startseite nicht aktualisiert wurden. Die Front-End-Seite verwendet Interpolationsausdrücke, um die Hintergrunddatenfelder zu binden. Nach erfolgreichem Aufruf der Hintergrundschnittstelle werden die Datenfelder geändert, die Front-End-Seite wird jedoch zu diesem Zeitpunkt nicht automatisch aktualisiert. Wie im folgenden Code gezeigt, handelt es sich um eine sehr einfache Verwendung von Interpolationsausdrücken, nichts Besonderes.

<span class="info-box-number text-success">{{sumDataDto.thirdAll}}</span>

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
        }
      });

---

Ursache des Problems

Dieses Problem betrifft eine Funktion von Angular – Änderungserkennung. Das verwendete Framework ist das ABP-Framework und das Attribut changeDetection wird der vom Framework automatisch generierten Seite hinzugefügt. Dieses Attribut gibt an, dass die Änderungserkennungsstrategie der aktuellen Komponente OnPush ist. changeDetection这条属性。这条属性指明了当前组件的变化检测策略是OnPush。

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [appModuleAnimation()],
  changeDetection:ChangeDetectionStrategy.OnPush
})

关于变化检测策略，有两种：

• Default：Default策略是默认策略，只要有值发生变化，就对组件及其子孙组件进行检查。

• OnPush：OnPush策略是只有当输入数据（@Input

  import { ChangeDetectorRef } from “angular”;

  In Bezug auf Änderungserkennungsstrategien gibt es zwei Arten:

---

Standard: Die Standard-Strategie ist die Standardstrategie. Solange sich der Wert ändert, werden die Komponente und ihre untergeordneten Komponenten überprüft.

OnPush: Die OnPush-Strategie besteht darin, dass die Komponente nur dann eine Änderungserkennung durchführt, wenn sich die Referenz der Eingabedaten (@Input) ändert oder ein Ereignis ausgelöst wird. Diese Strategie ist nicht gründlich, aber sehr effizient.

Befreiungsplan

Option 1: Diese Attributzuweisung direkt löschen

Option 2: Änderungserkennung manuell durchführen

Option 1 ist sehr einfach: Löschen Sie einfach direkt die Zuweisung dieser Änderungserkennungsstrategie in der Komponentenanweisung . Auf diese Weise übernimmt die Komponente die Standardstrategie, der Nachteil besteht jedoch darin, dass die Effizienz geringer wird.

Option zwei besteht darin, die Triggerfunktion des Änderungserkennungsmechanismus manuell aufzurufen, nachdem die Schnittstelle erfolgreich aufgerufen wurde. Hier kommen Änderungserkennungsobjekte zum Einsatz.

Führen Sie zuerst das Änderungserkennungsmodul ein.

constructor(private changeDetection:ChangeDetectorRef) {}

.

• Referenzen:

• https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000010928087

https://links.jianshu.com / go?to=https%3A%2F%2Fwww.cnblogs.com%2Flskzj%2Fp%2F11143233.html

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierlehre🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonVerstehen Sie den Änderungserkennungsmechanismus (Change Detection) in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!