So I have this page with 2 segments. The second segment contains a custom child component ‘survey-list’ that is shown if it’s selected. This child component is responsible for retrieving and displaying his information.
From the first page a user can push a second page, that will be put into the stack. In this second page it’s possible for the user for delete one of the elements of the ‘survey-list’ component. When the second page is poped (dismissed), the first page is displayed exactly as it was before, and if the ‘survey-list’ was the selected element of the segment, his list will still display that item which was deleted.
Some things that I did try:
-
Use a lifecycle hook for the child component. I found out that ionic do not offer page hooks to child components, so we are left alone with angular hooks, that as far as I know only focus on init and destroy events.
-
Make a @ViewChild referente to ‘survey-list’ and then use it’s parent lifecycle. That didn’t work out because on rendering the first page it’s possible that the segment that holds 'survey-list is not part of the DOM, causing the referente to be undefined.
I wonder if it’s possible to get a reference to a child component inside a function. If that’s possible I could get the reference and trigger the apropriate update function inside it.
Am I missing something here?
<ion-content padding>
<ion-segment [(ngModel)]="actionChoice" (ionChange)="loadLists()" color="dark" no-padding>
<ion-segment-button value="create">
New
</ion-segment-button>
<ion-segment-button value="edit">
Edit
</ion-segment-button>
</ion-segment>
<ion-list *ngIf="actionChoice === 'create'">
<div *ngFor="let channel of recently_used_channels">
<button ion-item
(click)="pushToTrades(channel.id)">
{{channel.name}}
</button>
</div>
<div *ngFor="let trade_type of trade_types">
<ion-item-divider sticky>
<h2><strong>{{trade_type.name}}</strong></h2>
</ion-item-divider>
<button ion-item
*ngFor="let channel of trade_type.channels"
(click)="pushToTrades(channel.id)"
style="color: #595959; font-size: 0.9em;">
{{channel.name}}
</button>
</div>
</ion-list>
<survey-list #list [type]="survey_list_type" *ngIf="actionChoice === 'edit'"></survey-list>
</ion-content>