使用一个 REST 调用的 Angular2 多个组件
Angular2 multiple components using one REST call
我是 Angular2 应用程序的一部分(我们使用 beta3),问题如下:
通常我们有一个组件使用一些服务,该服务使用一些 rest 调用并且该组件显示数据。太好了。
但是我们确实有一个页面包含超过 6 个组件,所有组件都使用相同的 REST 调用...(所有组件的后端 returns 数据)并且调用没有意义每个组件的 REST 的 6 倍,如果我们做一些客户端缓存也会很奇怪。
有开箱即用的东西吗?或者处理这种情况的模式?
谢谢。
只需在共享服务中执行即可。如果你只在 bootstrap(..., [OtherProviders, HTTP_PROVIDERS, MyService])
中添加它,每个组件将被注入相同的实例。将数据存储在服务中,每个组件都可以访问它
export class MyComponent {
constructor(private dataService:MyService) {
dataService.getData().subscribe(data => { this.data = data; });
}
}
export class MyService {
getData() {
if(!this.data) {
return http.get(...).map(...).subscribe(data => { this.data = data;});
}
return this.data;
}
}
@Günter 的回答很有道理!
我不知道你的代码是有组织的,但 observable 也可以订阅多次。为此,您需要使用 share
运算符使它们 "hot":
export class MyService {
dataObservable:Observable;
initDataObservable() {
this.dataObservable = http.get(...).map(...).share();
}
}
不使用 share
运算符,相应的请求将执行多次(每个订阅一次)。
您可以注意到,一旦在可观察对象上调用一个 subscribe
方法,请求就会被执行。
我是 Angular2 应用程序的一部分(我们使用 beta3),问题如下:
通常我们有一个组件使用一些服务,该服务使用一些 rest 调用并且该组件显示数据。太好了。
但是我们确实有一个页面包含超过 6 个组件,所有组件都使用相同的 REST 调用...(所有组件的后端 returns 数据)并且调用没有意义每个组件的 REST 的 6 倍,如果我们做一些客户端缓存也会很奇怪。
有开箱即用的东西吗?或者处理这种情况的模式?
谢谢。
只需在共享服务中执行即可。如果你只在 bootstrap(..., [OtherProviders, HTTP_PROVIDERS, MyService])
中添加它,每个组件将被注入相同的实例。将数据存储在服务中,每个组件都可以访问它
export class MyComponent {
constructor(private dataService:MyService) {
dataService.getData().subscribe(data => { this.data = data; });
}
}
export class MyService {
getData() {
if(!this.data) {
return http.get(...).map(...).subscribe(data => { this.data = data;});
}
return this.data;
}
}
@Günter 的回答很有道理!
我不知道你的代码是有组织的,但 observable 也可以订阅多次。为此,您需要使用 share
运算符使它们 "hot":
export class MyService {
dataObservable:Observable;
initDataObservable() {
this.dataObservable = http.get(...).map(...).share();
}
}
不使用 share
运算符,相应的请求将执行多次(每个订阅一次)。
您可以注意到,一旦在可观察对象上调用一个 subscribe
方法,请求就会被执行。