如何在 ionic 2 中刷新页面或刷新 ngOnInit()

Question

>我想知道是否有办法刷新ngOnInit((函数或刷新组件。 我不想使用拉取刷新方法。 我想在按钮单击或点击时执行此操作。谢谢

首页.ts文件

  checkNetwork() {
  console.log("check internet");
this.platform.ready().then(() => {
  if(this.network.type == "none"){
    this.shouldHide = false;
    this.dividerHide = true;
  }
    let alert = this.alertCtrl.create({
        title: "Connection Status",
        subTitle: <string> this.network.type,
        buttons: ["OK"]
    });
  alert.present();
});
}

首页.html文件

<ion-card [hidden]="shouldHide">
<ion-card-header>
  <img src="img/sad.png" />
</ion-card-header>
<ion-card-content>
  <ion-card-title style="text-align:center">
    No INTERNET!
  </ion-card-title>
  <button ion-button full (click)="refreshPage($event)">Retry</button>
</ion-card-content>

当连接可用时，我希望页面刷新

Answer 1

谢谢大家，这就是我管理它的方式

首页.ts文件

ngOnInit(){
 this.LoadData();}

checkNetwork() {
  console.log("check internet");
this.platform.ready().then(() => {
  if(this.network.type == "none"){
    this.shouldHide = false;
    this.dividerHide = true;
  }else{
    this.shouldHide = true;
    this.dividerHide = false;
    this.presentLoading()
  }
});
}
refreshPage()
  {this.LoadData();
}
public LoadData(){...}

首页.html文件

<ion-card [hidden]="shouldHide">
<ion-card-header>
  <img src="img/sad.png" />
</ion-card-header>
<ion-card-content>
  <ion-card-title style="text-align:center">
    Pas de connexion internet!
  </ion-card-title>
  <button ion-button full (click)="refreshPage()">Reessayer</button>
</ion-card-content>

Answer 2

使用此代码

refreshPage() {
   this.navCtrl.setRoot(this.navCtrl.getActive().component);
}

Answer 3

我的解决方法是呈现一个 Toast(ToastController(。Toast 显示，Toast 消失，然后 angular 像它应该的那样刷新数据。Toast 可以说"刷新数据"或任何与您相关的内容——就我而言，"来自blah@blah的新消息"。或者，如果您不想弄乱 UI，则可能只显示 1 毫秒的 Toast。

做this.navCtrl.setRoot(this.navCtrl.getActive().component);"有效"，但有完全重置导航堆栈的副作用，这通常是完全不可接受的。

Answer 4

您可能需要使用 init 方法或 Rx 的订阅重构代码结构，使其不需要页面刷新。

如果您需要重新加载

页面，为什么不使用重新加载方法？

window.location.reload();

编辑：

您使用的是 network.onConnect 订阅吗？

// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!');

  // We just got a connection but we need to wait briefly
   // before we determine the connection type.  Might need to wait

  // prior to doing any api requests as well.
  setTimeout(() => {
    if (this.network.type === 'wifi') {
      console.log('we got a wifi connection, woohoo!');
    }
  }, 3000);
});

Answer 5

你可以通过调用ngOnInit((来重新初始化页面：this.ngOnInit((;