Instance globale de fournisseur dans Ionic 3

Question

J'ai un fournisseur qui doit toujours être en hausse lorsque l'application est en cours d'exécution pour surveiller l'état de la connexion réseau.

Ainsi, selon que je tutorial ai ajouté la classe à mon dossier app.module.ts pour en faire une instance globale . Donc, autant que je le comprends, le service devrait être en hausse quand l'application initialise son composant racine (donc app.module.ts).

Problème: Le fournisseur n'est pas appelé jusqu'à ce qu'une page spécifique de l'application l'importe et l'utilise.

Dans le tutoriel mentionné le provider est importé comme ça:

ionicBootstrap(MyApp, [TestProvider]); 

Malheureusement cela ne fonctionne pas pour moi. Ce post dit que ce tout nouveau tutoriel est obsolète.

Question: Comment pourrais-je utiliser dans providersIonic 3 qu'ils sont disponibles une instance après le lancement de l'application?

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

Mon fournisseur:

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

Vous avez fait mal avec la dernière Ionic 3 et CLI .c'était une méthode ancienne et maintenant pas à jour.

J'espère que vous utilisez le dernier CLI. Ensuite, il est automatique surtout.

ionic generate provider SubscribeTopic 

Il ajoutera automatiquement SubscribeTopic dans un tableau providers dans le app.module.ts

Note: Ceci est juste un example.Please ajuster selon votre cas d'utilisation.

app.module.ts

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

Après cela, vous devez l'injecter dans votre page comme indiqué ci-dessous.

yourPage.ts

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

    } 

C'est it.You peut se référer this article aussi.

Answer 2

Vous devez appeler ce fournisseur au moins une fois, appeler ce fournisseur dans votre fichier home.ts

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

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

créer une fonction activateNetwork() dans votre fournisseur.

Dans votre fichier fournisseur:

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

Pour réaliser que l'application crée une instance d'un fournisseur sur le lancement (ce qui est logique pour un fournisseur de réseau qui surveille l'état du réseau) ajouter simplement le fournisseur au app.module.ts

providers: [ 
    NetworkConnectionProvider 
    ] 

Ensuite ajouter au constructeur de 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 
    } 

Chaque fois que le fournisseur est importé et utilisé plus tard dans l'application, il sera la même instance.