Ionic 3のプロバイダーのグローバルインスタンス

Question

ネットワーク接続ステータスを監視するためにアプリケーションが実行されているときは、常にプロバイダを用意する必要があります。

したがって、tutorialに私のapp.module.tsファイルにクラスを追加して、グローバルインスタンスにしました。だから私が理解する限り、サービスは、アプリケーションがそれがルートコンポーネント（したがってapp.module.ts）を初期化するときにアップする必要があります。

問題：プロバイダは、アプリケーションの特定のページがそれをインポートして使用するまで呼び出されません。前述のチュートリアルproviderで

は、そのようにインポートされます：

ionicBootstrap(MyApp, [TestProvider]); 

残念ながら、私のために動作しないこと。そのpostは、この全く新しいチュートリアルが時代遅れだと言っています。

質問：どのように私は、彼らがアプリケーションを起動した後つのインスタンスとして利用可能であることIonic 3でprovidersを使用することができますか？

マイ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 .ITと間違って古い方法だったと今時代遅れそれを行っています。

最新のCLIを使用していますよう願っております。ほとんどが自動です。

ionic generate provider SubscribeTopic 

それは自動的にapp.module.ts

ノートにproviders配列にSubscribeTopicを追加します：これはちょうどexample.Pleaseあなたのユースケースに応じてそれを調整しています。その後

app.module.ts

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

、あなたは以下に示すように、あなたのページにそれを注入する必要があります。

yourPage.ts it.Youがあまりにもthis articleを参照することができている

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

    } 

。

Answer 2

あなたのプロバイダでactivateNetwork（）関数を作成

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

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

を提出、少なくとも一度はそのプロバイダを呼び出して、あなたのhome.tsにそのプロバイダを呼び出す必要があります。アプリが起動上のプロバイダのインスタンスを作成することを達成するために

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 
    } 

のコンストラクタに追加

プロバイダがインポートされ、後でアプリで使用されるたびに、同じインスタンスになります。