シングルトン、4

Question

角度Iは、クラスとしてこのような何かサービスを定義しています：私はちょうどimportコマンドでそのクラスをインポートしています、他のコンポーネントやページで

@Injectable() 
export class MyService { 
... 
} 

を。

import { MyService } from '../pages/services/myservice'; 

コンストラクタで

：私のメインapp.module.tsで

constructor(public _MyService: MyService) 

私はプロバイダとして、そのクラスのサービスを追加しました。

providers: [someOtherThings, MyService, someOtherThings] 

予想通りに動作しています。サービスはシングルトンです。

しかし、角度4を使用するIonic 3では、すべてのコンポーネントがそのクラスの新しいインスタンスを作成しているように見えます。

角度4でシングルトンサービスクラスを作成するいくつかの新しい方法がありますか？

Answer 1

サービスのインスタンスをAppModuleに保存し、後で他のコンポーネントにのインスタンス（インスタンス化する代わりに）を取得してください。

import {Injector} from '@angular/core'; 

export class AppModule { 
    // Allows for retrieving singletons using 'AppModule.injector.get(MyService)' later in the code 

    static injector: Injector; 

    constructor(injector: Injector) { 
     AppModule.injector = injector; 
    } 
} 

とサービスのインスタンスの使用をretriveする：

const myService = AppModule.injector.get(MyService); 

ドキュメントHereをチェック！

Answer 2

私の場合、それはReflectiveInjectorと関係があります。

私は2つのサービスAとBを持っています。それぞれは、互いに参照しているシングルトンサービスである必要があります。

他のコンストラクタに挿入すると、循環参照のためにコンパイルエラーが発生することがあります。

私が使用している場合、それはA.

の別のインスタンスを作成し、データを保持CServiceを作ることによって解決されるべきであり、そしてAServiceとBServiceがデータにアクセスすることができますBのコンストラクタで

const injector = ReflectiveInjector.resolveAndCreate([AService]); 
const a = injector.get(AService); 

CServiceを介して。

Answer 3

Imはlazyloadでイオン3を使用し、角4は問題がない。 それをシングルトンにするには、あなたのアプリケーションモジュールがサービスを提供していることを確認してください。そのサービスを使用する@Componentのプロバイダを削除します。

アプリケーションモジュール

@NgModule({ 
    ... 

    providers: [ 
    StatusBar, 
    SplashScreen, 
    { provide: ErrorHandler, useClass: IonicErrorHandler }, 
    Singleton // the service or provider to be single ton 
    ] 
}) 
export class AppModule { } 

サービス

import { Injectable } from '@angular/core'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class Singleton { 

    data = "init data"; 
    constructor() { 
    console.log('Hello Singleton Provider'); 
    } 

    set(data){ 
    this.data = data; 
    } 

    log(){ 
    console.log(this.data); 
    } 
} 

TESケースイオンページ上のサービス

最初のページ

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { Singleton } from '../../providers/singleton'; 

@IonicPage() 
@Component({ 
    selector: 'page-first', 
    templateUrl: 'first.html' 
}) 
export class FirstPage { 
    constructor(public navCtrl: NavController, public navParams: 
    NavParams,private single:Singleton) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad First'); 
    this.single.log(); // log init data; 
    this.single.set("First singleton data"); 
    } 

} 

2番目のページ

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { Singleton } from '../../providers/singleton'; 

@IonicPage() 
@Component({ 
    selector: 'page-second', 
    templateUrl: 'second.html' 
}) 
export class SecondPage { 
    constructor(public navCtrl: NavController, public navParams: 
    NavParams,private single:Singleton) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad Second'); 
    this.single.log(); // log First singleton data 
    } 

} 

3ページ目コンポーネント

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { Singleton } from '../../providers/singleton'; 

@IonicPage() 
@Component({ 
    selector: 'page-second', 
    templateUrl: 'second.html', 
    providers:[Singleton] // wrong because its create a new instance 
}) 
export class ThirdPage { 
    constructor(public navCtrl: NavController, public navParams: 
    NavParams,private single:Singleton) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad ThirdPage'); 
    this.single.log(); // log init data 
    } 

} 

に追加プロバイダがそれシングルトンにするためにコンポーネントにプロバイダを削除することを確認した場合には、新しいインスタンスを作成します。