Je serais reconnaissant de toute aide à la NGRX/magasin et angulaire 2 lorsque vous travaillez avec des tableaux de composants vidéo ou tout autre composant, qui ne doivent pas être détruits et réinitialisée.angulaire 2 + NGRX/magasin - éviter la réinitialisation des composants dans le tableau
Le problème ici est que chaque fois que l'état du composant du conteneur vidéo en change tableau (de la manière immuable), cette composante est détruite et recréée.
Un autre cas d'utilisation similaire est le réseau de composants d'emballage composant de diagramme de jquery, qui ne doit pas être recréé à chaque fois que ses changements d'état de configuration.
Sans NGRX/magasin et état immuable, lorsque l'élément de tableau est modifié, il fonctionne bien et le conteneur vidéo n'est pas réinitialisés. Mais quand j'utilise la méthode immuable de gestion d'état avec ngrx/store, le tout nouveau tableau doit être créé et si certains paramètres vidéo (ou configuration de carte) changent, il est nécessaire de mettre à jour l'objet dans le tableau de manière immuable . Il pourrait ressembler à ceci:
[...container.slice(0, n), Object.assign({}, container[n], modifyObj), ...container.slice(n+1)]
Mais angulaire ne reconnaît pas que la composante n-ième est pas besoin d'être réinitialisés parce que la référence d'objet a changé. Je ne sais pas exactement comment la détection de zone fonctionne en interne, mais il semble que lorsque l'objet est cloné dans la liste, la référence est perdue et le composant est détruit et un nouveau composant est créé (et la vidéo commence depuis le début/le composant jquery se réinitialise).
Est-il possible de modifier le comportement de détection de l'élément de tableau ou tout autre moyen d'avoir à la fois l'état immuable et éléments à vie longue dans des tableaux?
https://plnkr.co/edit/H6h1PSGAG4LNPBIIrKEy?p=preview
J'ai créé exemple plunker. La propriété de compteur interne représente la "vidéo en cours de lecture". L'exemple montre que lorsque l'état de l'élément dans le tableau est modifié via Object.assign (...) (ici l'attribut "desc" de l'élément avec l'ID 1), le nouveau composant est créé et le compteur recommence à incrémenter 0 après il est détruit et réinitialisé à nouveau.
Merci pour toute aide.
pouvez-vous essayer de changer le '' changeDetection' à onPush'. Dans votre plunker peut essayer d'afficher le code ngrx réel que vous imitez le même? –
J'ai ajouté changeDetection et réécrit le plunker, de sorte qu'il utilise ngrx/store (et au lieu du compteur, j'ai ajouté une vidéo youtube avec autoplay). –
... Le résultat est le même: après l'ajout de la 4ème vidéo et la modification de l'état de la 1ère vidéo, la 1ère vidéo est à nouveau rechargée. Il n'y a pas de problème avec ngrx/store, mais avec l'état d'immuabilité lui-même.Lorsque je crée un nouvel objet dans le tableau lorsque l'état est modifié, Angular ne peut pas reconnaître que l'objet représente le même composant que dans l'état précédent - une méthode de comparaison "Comparer par ID" dans la détection angulaire est quelque chose que je pourrais . –