ChangeDetectionStrategy.OnPush et Observables.abonnez-vous dans Angulaire 2

Je suis d'essayer d'envelopper ma tête autour des meilleures pratiques lors de l'utilisation des Observables aux côtés de ChangeDetectionStrategy.OnPush.

L'exemple montre le scénario commun de vouloir montrer une sorte de message de chargement (ou une simple toupie d'animation peut-être):

Plnkr ici

@Component({
  selector: 'my-app',
  template: `Are we loading?: {{loadingMessage}}`,

  //Obviously "Default" will notice the change in `loadingMessage`...
  //changeDetection: ChangeDetectionStrategy.Default

  //But what is best practice when using OnPush?
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App implements OnInit {

  private loadingMessage = "Wait for it...";

  constructor() {

  }

  ngOnInit() {

    //Pretend we're loading data from a service.
    //This component is only interested in the call's success
    Observable.of(true)
      .delay(2000)
      .subscribe(success => {

        if(success){
          console.log('Pretend loading: success!');

          //OnPush won't detect this change
          this.loadingMessage = 'Success!';
        }

      });

  }
}

J'ai plus ou moins de comprendre l'exigence de l'immutabilité avec OnPush et, pour moi, au moins, elle n'a de sens lorsque l'on parle de réel modèle de données (probablement eu lieu dans une sorte de magasin).

Donc, j'ai deux questions:

  1. Pourquoi ne pas l'affectation de la nouvelle chaîne de valeur 'Success!' déclencher le changement de détecteur? Aussi loin que l'immuabilité est en cause, valeur a changé, non?
  2. Comment doit-léger composant interne de l'état (c'est à dire. loadingMessage) être mis en œuvre lors de l'utilisation de ChangeDetectionStrategy.OnPush? S'il y a plusieurs bonnes pratiques, merci de me pointer dans la bonne direction.
InformationsquelleAutor Philip Bulley | 2016-02-14
  1. 44

    Bonne question. J'ai deux citations de Savkin sur onPush (depuis l'angle.io docs ne semble pas avoir des infos sur ce sujet encore):

    Le cadre de vérifier OnPush uniquement des composants lors de leurs entrées de modifier ou de composants de modèles émettent des événements. -- ref

    Lors de l'utilisation de OnPush, Angulaire seulement le composant lors de l'une de ses propriétés d'entrée change, quand il déclenche un événement, ou lorsqu'une observable déclenche un événement. -- ref (dans un commentaire de réponse à @vivainio)

    La seconde citation semble plus complète. (Dommage qu'il a été enterré dans un commentaire!)

    Pourquoi ne pas l'affectation de la nouvelle chaîne de valeur Success! déclencher l'
    changement de détecteur? Aussi loin que l'immuabilité est en cause, valeur a changé, non?

    OnPush immutabilité est en référence à des propriétés d'entrée, pas normal propriétés d'une instance. Si loadingMessage ont une entrée de la propriété et de la valeur a changé, la détection de changement à l'exécution sur le composant. (Voir @Vlado réponse à Plunker.)

    Comment doit-léger composant interne de l'état (c'est à dire, loadingMessage) être mis en œuvre lors de l'utilisation de ChangeDetectionStrategy.OnPush? S'il y a plusieurs bonnes pratiques, merci de me pointer dans la bonne direction.

    Voici ce que je sais:

    • Si nous modifier l'état interne dans le cadre de la manipulation d'un événement, ou une partie d'un observable, de tir, de la détection de changement s'exécute sur l' OnPush composant (c'est à dire, la vue de mise à jour). Dans votre cas particulier, j'ai été surpris de voir que le point de vue n'a pas de mise à jour. Voici deux devine pourquoi pas:
      • Ajoutant delay() rend Angulaire de le regarder plus comme un setTimeout() plutôt que d'un changement observable. setTimeouts n'entraînent pas de changement de détection d'exécution sur un OnPush composant. Dans votre exemple, le Changement de Détecteur a terminé son travail de 2 secondes avant que la valeur de loadingMessage est changé.
      • Comme @Sasxa montre, dans sa réponse, vous devez avoir une liaison dans le modèle à la Observable. I. e., peut-être qu'il est plus que juste "une observable feux"... peut-être qu'il a à être un lié observables que les incendies. Dans ce cas, la création de loadingMessage (ou même plus générique state de propriété) d'un Observable lui-même vous permettra de lier votre modèle de sa valeur (ou de plusieurs async valeurs), voir cet exemple plnkr.
        Mise à jour 2016-04-28: il semble que la liaison doit inclure | async, comme indiqué dans le plnkr, et dans cette plnkr.
    • Si nous modifier l'état interne et il ne fait pas partie de la gestion des événements ou une observable de tir, nous pouvons injecter ChangeDetectorRef dans notre composant et d'appel de la méthode markForCheck() à cause de la détection de changement à exécuter sur le OnPush composant et tous ancêtre des composants jusqu'à la racine de composant. Si seulement l'état d'affichage est modifié (c'est à dire, de l'état de ce qui est local pour le composant et peut-être ses descendants), detectChanges() peut être utilisé à la place, qui ne marque pas tous les ancêtre des composants pour la détection de changement. Plunker
    • Merci pour votre réponse complète. Je pense que la meilleure solution est soit markForCheck() (je suis à la limite si c'est un peu hacky ou acceptable). Ou la création d'un loadingMessage ou state valeur comme une Observable lui-même, de cette façon, il peut représenter plusieurs membres de ce plnkr. Je pense que je vais l'ajouter à votre réponse et de l'accepter tel qu'il apparaît à couvrir toutes les bases.
    • n'est pas hacky. Le ChangeDetectorRef API doc montre un exemple très similaire à votre cas d'utilisation: un composant avec OnPush a un numberOfTicks propriété qui est mise à jour dans un setTimeout() de rappel, et markForCheck() est appelé à assurer l'affichage des mises à jour.
    • Merci pour la clarification de l'exemple.
    • TL;DR l'utilisation ChangeDetectorRef.markForCheck()
    • Je ne peux pas trouver cette citation sur le blog " Lors de l'utilisation de OnPush, Angulaire seulement le composant lors de l'une de ses propriétés d'entrée change, quand il déclenche un événement, ou lorsqu'une observable déclenche un événement. -- ref (dans un commentaire de réponse à @vivainio)'?
    • Je ne la vois plus non plus.

    InformationsquelleAutor Mark Rajcok
  2. 6

    Autant que je sache, OnPush est utilisé lors d'un travail directement observables:

    //our root app component
import {Component, OnInit, ChangeDetectionStrategy} from 'angular2/core'
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template: `Are we loading?: {{ loadingMessage |async }}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App implements OnInit {
  private loadingMessage;
  constructor() { }

  ngOnInit() {
    this.loadingMessage = Observable.of(true)
      .delay(2000)
  }
}
    • C'est une bonne solution basée sur mon exemple simplifié. En réalité, l'appel qui renvoie un Observable n'est pas faite dans ngOnInit, mais plutôt au sein d'un gestionnaire de soumission de formulaire. Sens de la liaison de modèle doit être {{ loadingMessage && loadingMessage | async }}.
    • ...Aussi, en réalité, je suis le maintien de l'état interne à l'aide d'une seule propriété state, le chargement est juste un de plusieurs états. Je suppose que state pourrait être un autre interne Observable, que par cette plnkr. Plusieurs state valeurs pourrait être poussé au fil du temps.
    • Notez également que Angular2 formes ont intégré observables (valueChanges de la propriété). Vous pouvez voulez regarder en trop...
    InformationsquelleAutor Sasxa
  3. 1

    Avec cette ChangeDetectionStrategy.OnPush vous dites votre composant pour n'écouter que pour les modifications sur les propriétés d'entrée.

    J'ai ajouté chargement du composant à votre exemple, juste pour vous montrer comment ça fonctionne:
    http://plnkr.co/edit/k5tkmcLlzkwz4t5ifqFD?p=preview

    • Merci pour votre démonstration, Vlado. La création d'un imbriquée composant simplement pour détecter un changement n'est pas une bonne solution, mais il ne s'illustrer votre point de bien.
    • En fait, je ne sais pas pourquoi loadingMessage n'est pas rendu à test, comme nous l'avons défini la valeur de test dans le dernier setTimeout. Quelqu'un pourrait-il m'aider à m'expliquer cela?
    InformationsquelleAutor Vlado Tesanovic