獨身離子3，角4

我定義爲服務類，像這樣：獨身離子3，角4

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

在其他組件或頁面，我導入一個類只需要導入命令。

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

在構造函數中：

constructor(public _MyService: MyService)

在我的主要app.module.ts我也補充說，一流的服務爲供應商。

providers: [someOtherThings, MyService, someOtherThings]

在離子2中，事情按預期工作。服務是單身。

但是在使用角度4的Ionic 3中，它看起來像每個組件正在創建該類的新實例。

是否有一些新的方法創建角4中的單例服務類？

來源

2017-04-13 Dragan Malinovic

我在項目中使用了類似的導入和注入器，但無法重現。 Ionic v3.1.2，Angular 4.1.0 – Nelson

這是你描述的非常奇怪的行爲。從Angular 2升級到Angular 4時，我沒有注意到這些變化。 –

我真的需要知道如何解決這個問題 –

嘗試將服務的實例存儲在您的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; 
    } 
}

而且以檢索服務的情況下使用：

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

檢查文檔Here！

來源

2017-05-17 10:48:20 SrAxi

在我的情況下，它與ReflectiveInjector有關。

我有兩個服務A和B，每個服務應該是一個單一的服務相互指向。

如果我將它們注入到另一個的構造函數中，由於循環引用，它可能會導致編譯錯誤。

如果我使用

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

在B的構造

，它將使A.

的另一個實例，是應該通過進行內部CService保存數據來解決，並AService和BService能夠訪問數據通過CService。

來源

2017-05-19 04:36:58 Ovilia

我使用離子3與lazyload角4和沒有問題。爲了讓它成爲單身人士，請確保您的應用程序模塊提供該服務。並刪除使用該服務的@Component上的提供者。

APP模塊

@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); 
    } 
}

維護設備爲例離子頁面上的服務

第一頁

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"); 
    } 

}

第二頁

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 
    } 

}

第三頁它創建新實例如果組件添加提供商

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 
    } 

}

確保取消對組件的供應商，使其單。

來源

2017-05-19 10:49:50

獨身離子3，角4

回答

相關問題