如何在 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

您可能需要使用 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 2

谢谢大家，我就是这样做到的

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 3

使用此代码

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

Answer 4

您可以 re-initialise 调用 ngOnInit() 的页面： this.ngOnInit();

Answer 5

我的解决方法是呈现祝酒词 (ToastController)。 Toast 显示，toast 消失，然后 angular 像预期的那样刷新数据。 Toast 可以说“正在刷新数据”或任何与您相关的内容——在我的例子中是“来自 blah@blah 的新消息”。或者，如果您不想弄乱 UI.

，也许只显示 1 毫秒的祝酒词

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

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

How to refresh a page or refresh ngOnInit() in ionic 2

refresh

buttonclick

page-refresh

ionic2

angular