Ionic 3中的单身人士，Angular 4

问题描述：

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

I am defining service as class, something like this:

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

在其他组件或页面中，我正在导入只有import命令的那个类。

In other components or pages, I am importing that class with just import command.

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

在构造函数中：

constructor(public _MyService: MyService)

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

In my main app.module.ts I have added that class service as provider.

providers: [someOtherThings, MyService, someOtherThings]

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

In Ionic 2, things are working as expected. Service is singleton.

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

But in Ionic 3, which uses angular 4, it looks like every component is creating new instance of that class.

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

Is there some new way of creating singleton services classes in angular 4?

答

我正在使用离子3与lazyload角度4并没有问题。
要使其成为单身人士，请确保您的应用模块提供服务。并删除使用该服务的@Component上的提供商。

Im using ionic 3 with lazyload an angular 4 and not having the issues. To make it singleton make sure your app module provide the service. and remove providers on @Component that use the service.

应用程序模块

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

}

第二页

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
  }

}

第三页如果提供商在组件上添加，则会创建新实例

Third Page it create new instance if providers added on component

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
  }

}

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

make sure to remove the providers on component to make it singleton.

Ionic 3中的单身人士，Angular 4

相关推荐