Quel est l’équivalent angular d’une montre AngularJS $?

Dans AngularJS, vous avez pu spécifier aux observateurs d’observer les changements dans les variables de scope en utilisant la fonction $watch du $scope . Qu’est-ce que cela équivaut à regarder les modifications de variables (dans, par exemple, les variables de composant) dans Angular?

    Dans Angular 2, la détection des modifications est automatique … $scope.$watch() et $scope.$digest() RIP

    Malheureusement, la section Détection de changement du guide de développement n’est pas encore écrite (il y a un espace réservé au bas de la page Vue d’ensemble de l’ architecture , dans la section “L’autre élément”).

    Voici ma compréhension du fonctionnement de la détection de changement:

    • Zone.js “monkey patches the world” – il intercepte toutes les API asynchrones du navigateur (lorsque Angular s’exécute). C’est pourquoi nous pouvons utiliser setTimeout() intérieur de nos composants plutôt que quelque chose comme $timeout … parce que setTimeout() est corrigé par des singes.
    • Angular construit et maintient un arbre de “détecteurs de changement”. Il existe un tel détecteur de changement (classe) par composant / directive. (Vous pouvez accéder à cet object en injectant ChangeDetectorRef .) Ces détecteurs de modifications sont créés lorsque Angular crée des composants. Ils gardent une trace de l’état de toutes vos liaisons, pour vérification des données. Celles-ci sont, dans un sens, similaires aux $watches() automatiques qu’Angular 1 devrait configurer pour les liaisons de modèles {{}} .
      Contrairement à Angular 1, le graphe de détection de changement est un arbre orienté et ne peut pas avoir de cycle (cela rend Angular 2 beaucoup plus performant, comme nous le verrons plus loin).
    • Lorsqu’un événement se déclenche (dans la zone angular), le code que nous avons écrit (le rappel du gestionnaire d’événement) s’exécute. Il peut mettre à jour les données souhaitées – le modèle / état de l’application partagée et / ou l’état d’affichage du composant.
    • Après cela, à cause des crochets ajoutés par Zone.js, il exécute alors l’algorithme de détection des modifications d’Angular. Par défaut (c.-à-d. Si vous n’utilisez pas la stratégie de détection des modifications onPush sur l’un de vos composants), chaque composant de l’arborescence est examiné une seule fois (TTL = 1) … par le haut, en premier lieu. (Eh bien, si vous êtes en mode dev, la détection des modifications s’exécute deux fois (TTL = 2). Voir ApplicationRef.tick () pour plus d’informations à ce sujet.)
      • Les hooks de cycle de vie sont appelés dans le cadre de la détection des modifications.
        Si les données de composant à surveiller sont une propriété d’entrée primitive (Ssortingng, boolean, number), vous pouvez implémenter ngOnChanges() pour être informé des modifications.
        Si la propriété d’entrée est un type de référence (object, tableau, etc.), mais que la référence n’a pas changé (par exemple, vous avez ajouté un élément à un tableau existant), vous devrez implémenter ngDoCheck() (voir ce SO répondez à plus sur ceci).
        Vous ne devez modifier que les propriétés et / ou les propriétés du composant des composants descendants (en raison de la mise en œuvre de l’arborescence unique, c’est-à-dire du stream de données unidirectionnel). Voici un plongeur qui viole cela. Les pipes à états peuvent également vous faire trébucher ici.
    • Pour tous les changements de liaison trouvés, les composants sont mis à jour, puis le DOM est mis à jour. La détection de changement est maintenant terminée.
    • Le navigateur remarque que le DOM change et met à jour l’écran.

    Autres références pour en savoir plus:

    • Angular $ digest renaît dans la nouvelle version d’Angular – explique comment les idées d’AngularJS sont associées à Angular
    • Tout ce que vous devez savoir sur la détection des changements dans Angular – explique en détail comment fonctionne la détection des modifications sous le capot
    • Explication de la détection des changements – Blog de l’auteur – 22 février 2016 – probablement la meilleure référence
    • La vidéo réinventée de Savkin’s Change Detection
    • Comment fonctionne la détection de changement angular 2? – Le blog de jhade 24 févr. 2016
    • La vidéo de Brian et la vidéo de Miško sur Zone.js. Brian parle de Zone.js. Miško explique comment Angular 2 utilise Zone.js pour implémenter la détection des modifications. Il parle également de la détection des changements en général, et un peu plus sur onPush .
    • Blogue de Victor Savkins: Détection de changement dans Angular 2 , Deux phases d’applications angulars 2 , Angular, Immutability et Encapsulation . Il couvre beaucoup de terrain rapidement, mais il peut parfois être laconique, et il ne rest plus qu’à se gratter la tête en se demandant quelles sont les pièces manquantes.
    • Ultra Fast Change Detection (Google doc) – très technique, très laconique, mais qui décrit / esquisse les classes ChangeDetection intégrées à l’arborescence

    Ce comportement fait désormais partie du cycle de vie du composant.

    Un composant peut implémenter la méthode ngOnChanges dans l’interface OnChanges pour accéder aux modifications apscopes aux entrées.

    Exemple:

     import {Component, Input, OnChanges} from 'angular2/core'; @Component({ selector: 'hero-comp', templateUrl: 'app/components/hero-comp/hero-comp.html', styleUrls: ['app/components/hero-comp/hero-comp.css'], providers: [], directives: [], pipes: [], inputs:['hero', 'real'] }) export class HeroComp implements OnChanges{ @Input() hero:Hero; @Input() real:ssortingng; constructor() { } ngOnChanges(changes) { console.log(changes); } } 

    Si, en plus de la liaison bidirectionnelle automatique, vous souhaitez appeler une fonction lorsqu’une valeur change, vous pouvez diviser la syntaxe de raccourci de liaison bidirectionnelle par la version plus détaillée.

    est sténographie pour

    (voir par exemple http://victorsavkin.com/post/119943127151/angular-2-template-syntax )

    Vous pourriez faire quelque chose comme ça:

    Vous pouvez utiliser la getter function ou get accessor joue le rôle de montre sur l’angle 2.

    Voir la démo ici .

     import {Component} from 'angular2/core'; @Component({ // Declare the tag name in index.html to where the component attaches selector: 'hello-world', // Location of the template for this component template: `  
    I'm array 1 {{ array1 | json }}
    I'm array 2 {{ array2 | json }}
    I'm concatenated {{ concatenatedArray | json }}
    I'm length of two arrays {{ arrayLength | json }}
    ` }) export class HelloWorld { array1: any[] = []; array2: any[] = []; get concatenatedArray(): any[] { return this.array1.concat(this.array2); } get arrayLength(): number { return this.concatenatedArray.length; } OnPushArray1() { this.array1.push(this.array1.length); } OnPushArray2() { this.array2.push(this.array2.length); } }

    Voici une autre approche utilisant les fonctions getter et setter pour le modèle.

     @Component({ selector: 'input-language', template: ` …  `, }) export class InputLanguageComponent { set query(value) { this._query = value; console.log('query set to :', value) } get query() { return this._query; } } 

    Si vous voulez le rendre bidirectionnel, vous pouvez utiliser [(yourVar)] , mais vous devez implémenter yourVarChange événementVarChange et l’appeler à chaque fois que votre variable change.

    Quelque chose comme ça pour suivre le changement de héros

     @Output() heroChange = new EventEmitter(); 

    et puis quand votre héros est changé, appelez this.heroChange.emit(this.hero);

    la liaison [(hero)] fera le rest pour vous

    voir exemple ici:

    http://plnkr.co/edit/efOGIJ0POh1XQeRZctSx?p=preview

    Essayez ceci quand votre application demande toujours $parse , $eval , $watch comme comportement dans Angular

    https://github.com/vinayk406/angular-expression-parser