通过所有应用程序Angular 2的组件交互共享变量答案

【问题标题】：Component interaction shared variable through all app Angular 2通过所有应用程序Angular 2的组件交互共享变量
【发布时间】：2017-06-07 14:32:38
【问题描述】：

我有 app.component.ts、header.component.ts、users.component.ts 和 shared.service .ts 带有一个变量“options”。

在 app.component.html 我有类似的东西：

<app-header></app-header>
<router-outlet></router-outlet>

其中 app-header - 与 header.component.ts 相关，router-outlet - 与 users.component 相关.ts

在 ngOnInit() 的 app.component.ts 中，我执行 ajax-request 以获取 "options" 并设置：

sharedService.options = "result of ajax"

然后我想在 header 和 users 组件的 ngOnInit() 方法中使用 sharedService.options 变量.但有时我会遇到sharedService.options.property is undefined 的错误。

我该如何解决？

【问题讨论】：

你应该使用可观察的angular.io/docs/ts/latest/cookbook/…

标签： angular typescript

【解决方案1】：

你在你的服务和 ngOnInit 中使用了一个 observable，您订阅了该服务。这是通常的模式。

类似的东西。

在 service.ts 中

getAll():Observable<Object[]>{     
      return this.http.get(this.newsURL)
                .map(res=>res.json())
                .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

在 ngOnInit 中你在构造函数中创建一个服务对象 &

this.myObject.getAll.subscribe(
 //logic goes here what u want to do for service return type.
)

【讨论】：