angular7 - 在 Ionic 4、Angular 7 中重新加载当前页面

Question

我正在尝试为那些在没有互联网连接的情况下运行应用程序的人建立后备。在 mypage.ts 中，我有以下内容:

import { Component, OnInit } from '@angular/core';
import { Network } from '@ionic-native/network/ngx';
@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.page.html',
  styleUrls: ['./contacto.page.scss'],
})
export class ContactoPage implements OnInit {
  constructor(private network: Network) {
        // watch network for a connection
        this.network.onConnect().subscribe(() => {
          document.getElementById("netOFF").style.display="none";
         // document.getElementById("netRel").style.display="none";
          console.log('Internet ON');
        });
         // watch network for a disconnection
         this.network.onDisconnect().subscribe(() => {
          document.getElementById("netON").style.display="none";
          console.log('Sin conexión a Internet');
        });
        function reload() {
          this.ionViewWillEnter();
      }
      }
  ngOnInit() { }
}

我的 html 文件如下所示:

<ion-content>
    <div id="netON">
        <iframe src="https://www.domain.es/" style="top:57px; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding: 0; overflow:hidden; z-index:999999;"></iframe>
      </div>
<div id="netOFF"><ion-img src="/assets/img/net.png" style="display:block; width:100%; height:100%; object-fit: cover; z-index:999999;"></ion-img>
</div>
  </ion-content>
  <ion-footer id="netRel" (click)="reload()">
      <ion-toolbar color="danger">
          <ion-icon name="exit" slot="start"></ion-icon>
        <ion-title>Reintentar</ion-title>
      </ion-toolbar>
    </ion-footer>

所以，联系表单是一个 iframe，如果手机没有互联网连接，netON(iFrame)将被隐藏，如果手机有互联网连接，则 iframe将显示。

此外，我还有一个按钮(click)="reload()"，供那些没有连接且返回在线状态以便重新加载页面的用户使用。

我需要一种在用户点击 Ionic 4 时重新加载页面的方法。

Please note that i made some changes in order to test the button action on click so i made it visible, but it's hidden if no Internet, and the picture as well.

Answer 1

您的代码没有显示您在调用 reload() 方法时实际加载的数据。**注意:您的 reload() 函数不应位于构造函数中。它应该在与 ngOnInit() { } **

相同级别的构造函数之外

因此，如果有数据需要获取，请像这样调用 reload() 方法中的函数/方法来重新获取并更新 View :

reload() {
    this.getData();
}

// where getData() method is what does the actually loading of the data like:

getData() {
    this.apiService.fetchData()
    .subscribe(
        data => {
            this.items = data;
    }, err => {});
}