独身离子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

回答

相关问题