Question

我正在尝试为那些没有Internet连接的运行APP的用户建立备用。在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，如果电话没有Internet连接，则 netON （iFrame）将被隐藏，如果电话具有Internet连接，则iframe将显示。

此外，对于没有连接的用户，我有一个按钮（click）=“ reload（）” ），以便重新加载页面，这些用户会重新上线。

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

请注意，我进行了一些更改以测试按钮点击操作，以便我将其显示出来，但是如果没有互联网，它就会被隐藏，以及图片。

Answer 1

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

相同级别的构造函数之外

因此，如果要提取数据，请像这样调用reload（）方法内部的函数/方法以重新获取和更新视图：

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 => {});
}

Answer 2

如果您想重新加载整个页面，请使用此代码。

window.location.reload();

重新加载Ionic 4，angular 7

2 个答案: