在Angular1.x.x中,你只需要相同的服务,最终得到同一个实例,这样就可以在服务中共享数据。
现在在Angular 2我有一个组件,有一个引用我的服务。我可以读取和修改服务中的数据,这是好的。当我尝试在另一个组件中注入相同的服务,似乎我得到一个新的实例。
我究竟做错了什么?是模式本身是错误的(使用服务共享数据)还是我需要将服务标记为单身(在应用程序的一个实例)或某物?
我在2.0.0-alpha.27 / btw
我通过appInjector(编辑:现在提供者)在@Component注释中注入服务,然后在构造函数中保存引用。它在组件中工作,而不是跨组件(它们不共享相同的服务实例),就像我认为的那样。
更新:从Angular 2.0.0,我们现在有@ngModule,你将在@ngModule的providers属性下定义服务。这将确保该服务的同一实例被传递到该模块中的每个组件,服务等。
https://angular.io/docs/ts/latest/guide/ngmodule.html#providers
服务单例是一个很好的解决方案。其他方式 – 数据/事件绑定。这里是两个例子:
class BazService{ n: number = 0; inc(){ this.n++; } } @Component({ selector: 'foo' }) @View({ template: `<button (click)="foobaz.inc()">Foo {{ foobaz.n }}</button>` }) class FooComponent{ constructor(foobaz: BazService){ this.foobaz = foobaz; } } @Component({ selector: 'bar',properties: ['prop'] }) @View({ template: `<button (click)="barbaz.inc()">Bar {{ barbaz.n }},Foo {{ prop.foobaz.n }}</button>` }) class BarComponent{ constructor(barbaz: BazService){ this.barbaz = barbaz; } } @Component({ selector: 'app',viewInjector: [BazService] }) @View({ template: ` <foo #f></foo> <bar [prop]="f"></bar> `,directives: [FooComponent,BarComponent] }) class AppComponent{} bootstrap(AppComponent);