使用离子在另一个组件中选择选项更改后如何刷新同一页面？答案

【问题标题】：How to refresh the same page after select option changes in another component using ionic?使用离子在另一个组件中选择选项更改后如何刷新同一页面？
【发布时间】：2022-02-12 14:44:54
【问题描述】：

我是离子新手。用户从下拉列表中选择一个选项后，我正在尝试刷新同一页面。但是我的下拉列表在另一个组件中（有点像局部视图），我在其他组件中使用了它。我尝试导航，但没有刷新页面。我希望当用户选择组件将刷新的选项时。 ngOnInit 方法可以正常工作。这是我的局部视图组件：

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

这是这个组件的html：

  <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>

这是我在另一个 html 页面中使用上述组件标签的地方：

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

在这种情况下，我想刷新 PrizePackages 页面。我该怎么办？

【问题讨论】：

stackoverflow.com/a/62275436/5909026
或者你可以用 angular 来观察 observable。它需要对您的代码进行一些更改通过订阅，您的数据将随着更改而更新。 zaneharker.medium.com/…（提示：记得订阅你的 observable，记得在你的 observable 中返回一些东西）

标签： angular ionic-framework

【解决方案1】：

我在 Ionic 和 Agular 中推荐的第一件事是将本地存储实现更改为 ionic 建议的实现，因为浏览器的本地存储不起作用（它使用 @ionic/storage）。

要在组件之间进行更改，我建议您使用 RxJS，通过 Angular 服务，另一个倾向于使用的实现是 Redux，我不太喜欢它，作为我不推荐的最后一个选项，在连接组件的服务，这会带来很多问题。

希望我的回答对你有用！

【讨论】：

【解决方案2】：

移动应用程序中没有重新加载。鉴于您的情况，我建议您将 ngif 添加到您想要根据新数据隐藏/显示的 html 内容中。

因此，当您获得新数据时，您会隐藏您的 html 内容，用新数据更新它并再次显示它。

【讨论】：

【解决方案3】：

这个问题解决了

window.location.reload();

【讨论】：