Ionic 3、Angular 4 中的单例 [英] Singletons in 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.
但在使用 angular 4 的 Ionic 3 中,看起来每个组件都在创建该类的新实例.
But in Ionic 3, which uses angular 4, it looks like every component is creating new instance of that class.
是否有一些新方法可以在 Angular 4 中创建单例服务类?
Is there some new way of creating singleton services classes in angular 4?
推荐答案
我使用 ionic 3 和延迟加载 Angular 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);
}
}
在离子页面上的服务案例
首页
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 中的单例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!