Pratique de développement angulaire (5) : analyse approfondie de la surveillance des changements

Qu'est-ce que la surveillance des modifications

Lors du développement avec Angular, nous utilisons souvent la liaison dans Angular - liaison d'entrée du modèle à la vue, liaison de sortie de la vue au modèle et liaison entre la vue et le modèle Liaison bidirectionnelle. La raison pour laquelle ces valeurs liées peuvent être synchronisées entre la vue et le modèle est due à la détection des changements dans Angular.

Pour faire simple, la détection de changement est utilisée par Angular pour détecter si les valeurs liées entre la vue et le modèle ont changé. Lorsqu'il est détecté que les valeurs liées dans le modèle ont changé, elle est synchronisée avec la vue. Au contraire, lorsqu'il est détecté que la valeur liée sur la vue change, la fonction de liaison correspondante est rappelée.

La source de la surveillance des changements

La clé de la surveillance des changements est de savoir comment surveiller si les valeurs liées ont changé à la plus petite granularité et dans quelles circonstances ces valeurs liées seront provoquées. changer de drap de laine ? Nous pouvons jeter un œil à plusieurs scénarios couramment utilisés :

Événements : click/hover/...

@Component({
  selector: 'demo-component',
  template: `
    <h1>{{name}}</h1>
    <button (click)="changeName()">change name</button>
  `
})
export class DemoComponent {
    name: string = &#39;Tom&#39;;
    
    changeName() {
        this.name = &#39;Jerry&#39;;
    }
}

Nous lions l'attribut name dans le modèle via des expressions d'interpolation. Lorsque change name按钮 est cliqué, la valeur de l'attribut name est modifiée et le contenu affiché dans la vue modèle change également.

XHR/webSocket

@Component({
  selector: 'demo-component',
  template: `
    <h1>{{name}}</h1>
  `
})
export class DemoComponent implements OnInit {
    name: string = &#39;Tom&#39;;
    
    constructor(public http: HttpClient) {}
    
    ngOnInit() {
        // 假设有这个./getNewName请求，返回一个新值&#39;Jerry&#39;
        this.http.get(&#39;./getNewName&#39;).subscribe((data: string) => {
            this.name = data;
        });
    }
}

Nous avons envoyé une requête Ajax au serveur dans la fonction ngOnInit de ce composant. Lorsque cette requête renvoie le résultat, elle modifiera également la liaison sur le courant. vue modèle. La valeur de l’attribut de nom spécifié.

Times : setTimeout/requestAnimationFrame

@Component({
  selector: 'demo-component',
  template: `
    <h1>{{name}}</h1>
  `
})
export class DemoComponent implements OnInit {
    name: string = &#39;Tom&#39;;
    
    constructor() {}
    
    ngOnInit() {
        // 假设有这个./getNewName请求，返回一个新值&#39;Jerry&#39;
        setTimeout(() => {
            this.name = &#39;Jerry&#39;;
        }, 1000);
    }
}

Nous définissons une tâche planifiée dans la fonction ngOnInit de ce composant. Lorsque la tâche planifiée est exécutée, elle modifiera également la liaison sur la vue actuelle. . La valeur de l'attribut name.

Résumé

• En fait, il n'est pas difficile de constater que les trois situations ci-dessus ont une chose en commun, à savoir ces événements qui font que la valeur contraignante les changements se produisent tous de manière asynchrone.

• Angular ne capture pas les changements dans les objets. Il utilise le timing approprié pour vérifier si la valeur de l'objet a été modifiée. Ce timing est l'occurrence de ces événements asynchrones.

• Ce timing est contrôlé par le service NgZone. Il obtient le contexte d'exécution de l'ensemble de l'application et peut capturer l'occurrence, l'achèvement ou l'exception d'événements asynchrones associés, puis pilote l'implémentation angulaire de mécanisme de suivi des changements.

Mécanisme de traitement de la surveillance des changements

Grâce à l'introduction ci-dessus, nous comprenons à peu près comment la détection des changements est déclenchée, puis comment la surveillance des changements dans Angular est effectuée. Tissu de laine ?

La première chose que nous devons savoir est que pour chaque composant, il existe un moniteur de modifications correspondant ; c'est-à-dire que chaque composant correspond à un changeDetector, que nous pouvons obtenir par injection de dépendances dans le composant <. 🎜>. changeDetector

, alors les changeDetector sont également organisés dans une arborescence. changeDetector

@Component({
  selector: 'demo-child',
  template: `
    <h1>{{title}}</h1>
    <p>{{paramOne}}</p>
    <p>{{paramTwo}}</p>
  `
})
export class DemoChildComponent {
    title: string = &#39;子组件标题&#39;;
    @Input() paramOne: any; // 输入属性1
    @Input() paramTwo: any; // 输入属性2
}

@Component({
  selector: 'demo-parent',
  template: `
    <h1>{{title}}</h1>
    <demo-child [paramOne]=&#39;paramOneVal&#39; [paramTwo]=&#39;paramTwoVal&#39;></demo-child>
    <button (click)="changeVal()">change name</button>
  `
})
export class DemoParentComponent {
    title: string = &#39;父组件标题&#39;;
    paramOneVal: any = &#39;传递给paramOne的数据&#39;;
    paramTwoVal: any = &#39;传递给paramTwo的数据&#39;;
    
    changeVal() {
        this.paramOneVal = &#39;改变之后的传递给paramOne的数据&#39;;
    }
}

@Component({
  selector: 'demo-parent',
  template: `
    <h1>{{title}}</h1>
  `
})
export class DemoParentComponent implements OnInit {
    title: string = &#39;组件标题&#39;;
    
    constructor(public cdRef: ChangeDetectorRef) {}
    
    ngOnInit() {
        this.cdRef.detach(); // 停止组件的变化监测，看需求使用不同的方法
    }
}