Maison >interface Web >js tutoriel >Comprendre le mécanisme de détection de changement (Change Detection) dans Angular
Recommandations de tutoriel associées : "tutoriel angulaire"
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
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.
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!