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이 사용 사례에 따라이를 조정할 수있다.

그 후

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

을 app.module.ts, 아래 그림과 같이 페이지에 주입 할 필요가있다.

yourPage.ts it.You이 너무 this article을 참조 할 수있다

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

    } 

.

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에 공급자를 추가 그 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 
    } 

의 생성자에 추가 한 후

providers: [ 
    NetworkConnectionProvider 
    ] 

해당 공급자를 가져 와서 나중에 응용 프로그램에서 사용할 때마다 동일한 인스턴스가됩니다.