Ionic 3提供程序的全局實例

Question

我有一個提供程序必須在應用程序運行時始終保持運行狀態，以監視網絡連接狀態。

所以按照該tutorial我已經添加了類我app.module.ts文件，使之成爲全局實例。所以據我瞭解，當應用程序初始化它的根組件時服務應該啓動（因此app.module.ts）。

問題：在應用程序的特定頁面導入並使用它之前，不會調用提供程序。

在提到教程provider導入這樣的：

ionicBootstrap(MyApp, [TestProvider]); 

不幸的是，它不適合我的工作。那post說這個比較新的教程已經過時了。

問題：我怎麼能使用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

你已經做錯了與最新Ionic 3和CLI。那是一個古老的方法，現在已經過時。

希望你使用最新的CLI。然後它主要是自動的。

ionic generate provider SubscribeTopic 

它會自動添加到SubscribeTopic陣列providers在app.module.ts

注：這只是一個example.Please根據你的使用情況進行調整。

app.module.ts

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

之後，你需要如下圖所示將其注入到您的網頁。

yourPage.ts

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

    } 

也就是說it.You可以參考this article了。

Answer 2

你必須調用提供至少一次，請致電您的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); 
}); 

} 

Answer 3

爲了實現該應用程序創建一個供應商的上啓動實例（是什麼使該手錶的網絡狀態的網絡提供商感）只是將提供程序添加到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 
    } 

構造

每次提供者被導入並在應用程序中稍後使用時，它都將是相同的實例。