如何在Angular2中的组件之间共享数据？

发布时间：2020-12-17 08:38:25 所属栏目：安全来源：网络整理

导读：在Angular1.x.x中，你只需要相同的服务，最终得到同一个实例，这样就可以在服务中共享数据。现在在Angular 2我有一个组件，有一个引用我的服务。我可以读取和修改服务中的数据，这是好的。当我尝试在另一个组件中注入相同的服务，似乎我得到一个新的实例。

在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);

Watch live

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!