How to refresh the same page after select option changes in another component using ionic?-CodePudding

I'm new to ionic. I'm trying to refresh the same page after user selects an option from dropdown. but the my dropdown is in another component(somehow like partial view) and I used this in other components. I tried navigating but it didn't refresh the page. I want when user selects an option that component will refresh. the ngOnInit method works fine btw. This is my partial view component:

 navigateTo(path: string) {
localStorage.setItem('selectedapp', this.appId);
this.router.navigate([path]);
 }

this is the html of this component:

  <ion-item *ngIf="!isPrivate">
  <ion-label>فروشگاه های من</ion-label>
  <ion-select [(ngModel)]="appId" (ionChange)="navigateTo(model[0].url)" ok-text="تایید" cancel-text="کنسل" [value]="00000000-0000-0000-0000-000000000000">
    <ion-select-option value="00000000-0000-0000-0000-000000000000">همه</ion-select-option>
    <ion-select-option value="{{item.applicationId}}" *ngFor="let item of model">{{item.applicationTitle}}</ion-select-option>
    </ion-select>
</ion-item>

This is where I used above component's tag in another html page:

 <app-user-applications returnUrl="prizePackages"></app-user-applications>

in this case I want to refresh the prizePackages page. what should I do?

CodePudding user response：

The first thing I recommend in Ionic with Agular is that you change the local-storage implementation to the one suggested by ionic, since the browser's local storage doesn't work (it uses @ionic/storage).

To make changes between components I recommend that you use RxJS, through Angular services, another implementation that tends to be used is Redux, which I do not like very much, as a last option that I do not recommend, use promises in the services to connect the components, this can bring many problems.

I hope my answer works for you!

CodePudding user response：

There is no reload in mobile applications. Given your scenario, what I suggest you do is add ngif to your html contents that you want to hide / show based on new data.

Thus when you get new data, you hide your html content, update it with new data and show it again.