Ionic 3、Angular 4 中的单例答案

【问题标题】：Singletons in Ionic 3, Angular 4Ionic 3、Angular 4 中的单例
【发布时间】：2017-09-09 07:34:28
【问题描述】：

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

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

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

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

在构造函数中：

constructor(public _MyService: MyService)

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

providers: [someOtherThings, MyService, someOtherThings]

在 Ionic 2 中，一切正常。服务是单例的。

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

是否有一些新方法可以在 Angular 4 中创建单例服务类？

【问题讨论】：

我在一个项目中使用了类似的导入和注入器，无法重现。离子 v3.1.2，角度 4.1.0
您所描述的行为非常奇怪。在将网络应用从 Angular 2 升级到 Angular 4 时，我没有注意到任何此类变化。
我真的需要知道如何解决这个问题
@Dragan 请问一下，你怎么知道它为每个组件创建新实例？
希望这将成为一个很好的资源 - chat.stackoverflow.com/rooms/153499/ionic-3

标签： angular ionic2 ionic3

【解决方案1】：

我使用带有延迟加载的 ionic 3 和 angular 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
  }

}

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

【讨论】：

这是一个简单、清晰、完整的示例。谢谢！
将此人标记为正确答案、完美定义并且完美运行！

【解决方案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);

查看文档Here！

【讨论】：

这里很好地使用了单例模式！我一直不清楚将服务注入单个组件是否会创建新实例。这为我澄清了这一点。谢谢。

【解决方案3】：

就我而言，它与ReflectiveInjector 有关。

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

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

如果我使用

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

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

而应该通过制作一个CService来保存数据来解决，AService和BService可以通过CService访问数据。

【讨论】：