I am currently working with Ionic 3.20 and Angular 5.2.9, encountering an issue with content refreshing after a model change. Despite being new to this, I sense that I might be overlooking something fundamental.
Within my view, I have the following element:
myService, I have two functions as below:ngOnInit),is invoked and the view renders successfully. When I perform an action on a specific item in the list, the list should refresh (eliminating the specific item). I achieve this with the following code:this.myService.retrieveListOfData()this.myListis updated in the console, the view (list of items) does not refresh upon returning to the page with the list. Here's the code snippet:this.actionService.DoAction().subscribe((result) => { if(result == 'success') { this.myService.retrieveListOfData(); // navigate back to the page with the list of items from the detail page of a specific item this.app.getRootNav().popToRoot(); } });This issue might be related to the Zone. How can I effectively refresh the list of items from the detail page of a specific item?
Appreciate any insights!
EDIT 2018-05-14: Upon investigating, I discovered the root cause of the problem in my app. We implemented lazy loading of modules, which resulted in the service not being shared as a singleton among components. Instead, each component ran its own instance of the service. To address this, I implemented the solution outlined in this blog post.
I also realized that the terminology in my question was slightly inaccurate - the mentioned components are not siblings (not in the "Angular way"). I'm marking Joshua's answer as correct.