Comprendre le mécanisme de détection de changement (Change Detection) dans Angular

Recommandations de tutoriel associées : "tutoriel angulaire"

Phénomène problématique

pendant le processus de développement , rencontrant le problème que les données de la première page ne sont pas mises à jour. La page frontale utilise des expressions d'interpolation pour lier les champs de données d'arrière-plan. Une fois l'appel de l'interface d'arrière-plan réussi, les champs de données seront modifiés, mais la page frontale n'est pas automatiquement mise à jour pour le moment. Comme le montre le code suivant, il s’agit d’une utilisation très basique des expressions d’interpolation, et elle n’a rien de spécial.

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

rrree

---

Cause du problème

Ce problème implique une fonctionnalité d'Angular - Détection de changement. Le framework utilisé est le framework ABP, et l'attribut changeDetection est ajouté à la page générée automatiquement par le framework. Cet attribut indique que la stratégie de détection des changements du composant actuel est OnPush.

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

Concernant les stratégies de détection de changement, il existe deux types :

• Par défaut : La stratégie Default est la stratégie par défaut Tant que la valeur change, le composant. et ses descendants seront détectés. Les composants sont inspectés.

• OnPush : La stratégie OnPush est que le composant n'effectuera une détection de changement que lorsque la référence des données d'entrée (@Input) change ou qu'un événement est déclenché. Cette stratégie n’est pas approfondie mais très efficace.

---

Plan de libération

• Option 1, supprimer directement cette attribution d'attribut
• Option 2, effectuer manuellement la détection des modifications

La première option est très simple, elle consiste à supprimer directement l'instruction d'affectation de la stratégie de détection de changement dans le composant. De cette façon, le composant adoptera la stratégie par défaut, mais l’inconvénient est que l’efficacité devient moindre.

La deuxième option consiste à appeler manuellement la fonction de déclenchement du mécanisme de détection de changement après avoir appelé avec succès l'interface. Les objets de détection de changement sont utilisés ici.
Introduisez d'abord le module de détection de changement

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

Puis déclarez l'objet de détection de changement

import { ChangeDetectorRef } from “angular”;

Appelez la méthode de détection de changement une fois l'appel d'interface réussi

constructor(private changeDetection:ChangeDetectorRef) {}

C'est un peu garbage pour appeler C# manuellement L'odeur du mécanisme de recyclage.

Référence :

• 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

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!