离子 3、角 4 中的单例

Question

我将服务定义为类，如下所示：

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

在其他组件或页面中，我只使用导入命令导入该类。

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

在构造函数中：

constructor(public _MyService: MyService)

在我的主app.module.ts中，我添加了该类服务作为提供者。

providers: [someOtherThings, MyService, someOtherThings]

在Ionic 2中，事情按预期工作。服务是单例的。

但是在使用角度4的Ionic 3中，看起来每个组件都在创建该类的新实例。

是否有一些在角度 4 中创建单例服务类的新方法？

Answer 1

我使用离子 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);   
  }
}

苔丝案例离子页面上的服务

第一页

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

确保删除组件上的提供程序以使其成为单一实例。

Answer 2

尝试将服务的实例存储在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);

在此处查看文档！

Answer 3

就我而言，这与ReflectiveInjector有关。

我有两个服务 A 和 B，每个都应该是相互引用的单例服务。

如果我将它们注入到另一个的构造函数中，由于循环引用，可能会导致编译错误。

如果我使用

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

在 B 的构造函数中，它将创建 A 的另一个实例。

并且应该通过让一个CService保存数据来解决，AService和BService可以通过CService访问数据。