gpt4 book ai didi

angular - Ionic 3、Angular 4 中的单例

转载 作者:太空狗 更新时间:2023-10-29 16:51:34 27 4
gpt4 key购买 nike

我将服务定义为类,如下所示:

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

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

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 中是否有一些创建单例服务类的新方法?

最佳答案

我将 ionic 3 与 lazyload an 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);
}
}

Tes Case the service on ionic page

首页

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 如果在组件上添加了提供者,它会创建新的实例

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
}

}

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

关于angular - Ionic 3、Angular 4 中的单例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43387855/

27 4 0
文章推荐: angular - 在具有双向绑定(bind)的