Question

我有一个提供程序，在应用程序运行时必须始终处于启动状态，以监视网络连接状态。

因此，根据tutorial，我已将该类添加到我的app.module.ts文件中，以使其成为全局实例。因此，据我所知，当应用初始化它的根组件（因此app.module.ts）时，该服务应该启动。

问题：在应用的特定页面导入并使用它之前，不会调用提供程序。

在上述教程中，provider的导入方式如下：

ionicBootstrap(MyApp, [TestProvider]);

不幸的是，这对我不起作用。 post说这个全新的教程已经过时了。

问题：启动应用程序后，如何在providers Ionic 3中使用import { NetworkConnectionProvider } from '../providers/networkconnection/networkconnection'; // (...) @NgModule({ declarations: [ MyApp, // (...) ], imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp), ionicGalleryModal.GalleryModalModule, ], bootstrap: [ IonicApp ], entryComponents: [ MyApp, // (...) ], providers: [ // (...) NetworkConnectionProvider ] }) export class AppModule {}作为一个实例？

我的app.module.ts：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Network } from '@ionic-native/network';


@Injectable()
export class NetworkConnectionProvider {
  private TAG = "NetworkConnectionProvider ";

  private isConnectedToInternet: Boolean;

  constructor(
    public http: Http,
    public network: Network
    ) {

    this.isConnectedToInternet = true;

    let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      console.log(this.TAG + 'network was disconnected.');
      this.isConnectedToInternet = false;
    });

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

      // 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(this.TAG + 'wifi connection available');
        }
      }, 3000);
    });

    console.log('Hello NetworkConnectionProvider');
  }

  public subscribeOnConnect() {
    return this.network.onConnect();
  }

  public isConnected(): Boolean{
    return this.isConnectedToInternet;
  }

  public getConnectionType(): string {
    return this.network.type;
  }

}

我的提供者：

data.frame

Answer 1

要实现该应用程序在启动时创建提供程序的实例（对于监视网络状态的网络提供程序有意义），只需将提供程序添加到app.module.ts

  providers: [
    NetworkConnectionProvider
  ]

之后将其添加到app.component.ts

的构造函数中

constructor(
    platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    private sideMenuService: SideMenuService,
    network: NetworkConnectionProvider
  ) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });

    // other stuff
  }

每次导入该提供程序并稍后在该应用程序中使用该提供程序时，它将是同一个实例。

Answer 2

你对最新的Ionic 3和CLI做错了。这是一种旧方法，现在已经过时了。

希望您使用最新的CLI。然后它主要是自动的。

ionic generate provider SubscribeTopic

它会自动将SubscribeTopic添加到providers

中的app.module.ts数组中

注意：这只是一个例子。请根据您的使用情况进行调整。

app.module.ts

providers: [
  //other providers here
  SubscribeTopic //here
]

之后，您需要将其注入您的页面，如下所示。

yourPage.ts

constructor(private navCtrl: NavController, private subscribeTopic : SubscribeTopic ) {

  }

就是这样。你也可以参考this article。

Answer 3

您必须至少调用该提供商一次，在home.ts文件中调用该提供商

import { NetworkConnectionProvider } from '../Your-Path';

constructor(public navCtrl: NavController, public netprovider : NetworkConnectionProvider ) {
   netprovider.activateNetwork();
}

在您的提供商中创建一个activateNetwork（）函数。

在您的提供者文件中：

activateNetwork(){
   let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
  console.log(this.TAG + 'network was disconnected.');
  this.isConnectedToInternet = false;
});

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

  // 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(this.TAG + 'wifi connection available');
    }
  }, 3000);
});

}

Ionic 3中的全球提供商实例

3 个答案: