abonnement angulaire 2 routage détection de changement de

Question

Compte tenu de ce code:

ngOnInit() { 
    this.apiService.getBlogPosts().subscribe(blogPosts => { 
     this.allBlogPosts = blogPosts; 

     this.changeDetector.detectChanges(); 
    })); 
} 

Je suis en train de comprendre pourquoi je suis obligé d'utiliser this.changeDetector.detectChanges();

Les circonstances sont que si je charge mon itinéraire blog pour la première fois , mes messages charge bien, si je route à une autre page (soit un autre component ou le même "blog" component pour afficher les détails d'un poste particulier (par exemple 'blog/my-post')) puis je route retour au "blog "composant à la racine ('blog /'), cette fois, le modèle ne parvient pas à mettre à jour avec les messages. Je peux voir dans mon onglet Inspect, Network, que la route pour obtenir les messages fonctionne toujours, console.log montre que tout semble bien, mais le modèle ne parvient pas à mettre à jour à moins que je force la détection de changement. Est-ce que ce comportement est attendu? Peut-on y remédier? Cela semble étrange ...

Une autre chose à noter est que les deux première fois et 3 fois que je visite le « blog » component J'utilise:

this.router.navigate([`/${url}`]); 

Pour vous rendre ... et ce ne peut pas être aidé ...

Edit: la méthode getBlogPosts() est dans mon ApiService que j'injectent dans mon BlogComponent:

public getBlogPosts() : Observable<BlogPost[]> { 
    return this.http.get(`${ environment.apiUrl }GetBlogPosts`, { headers: this.headers }) 
        .map((response: Response) => <BlogPost[]>response.json()); 
} 

Answer 1

Angular utilise NgZone pour être averti chaque fois que le cycle de détection de changement doit être exécuté. NgZone utilise zone.js sous le capot qui intercepte toutes les opérations asynchrones comme setTimeout, new Promise, XHR demandes etc Donc, généralement, il fonctionne sans efforts supplémentaires du développeur.

Toutefois, si vous effectuez une opération qui n'est pas interceptée par zone.js, la détection des modifications n'est pas déclenchée et doit être effectuée manuellement. Mais vous pouvez utiliser NgZone pour exécuter une action dans la zone Angulaire, ce qui signifie que Angular lancera la détection des modifications après l'exécution du rappel.

Donc, dans votre cas, vous pouvez essayer quelque chose comme ceci:

this.routerSubject.subscribe((url: string) => { NgZone.run(() => this.router.navigate([/${url}]); }); 

où NgZone peut être injecté dans un composant angulaire ou service:

constructor(zone: NgZone) {}