Ionic 3中的全球提供商实例

Question

我有一个提供程序,当应用程序运行时,必须始终启动以监视网络连接状态.

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

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

在上面提到的教程中,provider导入如下:

ionicBootstrap(MyApp, [TestProvider]);

不幸的是,这对我不起作用.那篇文章说这个全新的教程已经过时了.

问题:我如何使用它providers,Ionic 3因为它们在启动应用程序后可作为一个实例使用？

我的app.module.ts:

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 {}

我的提供者:

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;
  }

}

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
  }

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