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

Question

我想知道是否有办法刷新 ngOnInit() 函数或刷新组件。我不想使用拉动刷新方法。我想在按钮单击或点击时做到这一点。谢谢

home.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();
});
}

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

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

home.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(){...}

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

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

Answer 4

我的解决方法是展示一个 toast (ToastController)。 Toast 显示，toast 消失，然后按预期的方式刷新数据。 Toast 可以说“刷新数据”或任何与您相关的内容——在我的例子中是“来自 blah@blah 的新消息”。或者，如果您不想弄乱 UI，也许只显示 1 毫秒的 toast。

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

Answer 5

您可能需要使用 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);
});