Question

我有一个使用应用程序从后端API使用服务在应用程序启动时一次生成的对象列表，问题是如何初始化该列表并从其他组件访问该列表？ >

例如，在app.module.ts中，我想要类似的东西：

    export class AppComponent {
  title = 'General Title';
  myListFromServiceApi:[DataType]; 
  }

如何在mycomponent.ts中调用它

ngOnInit() {
this.myListFromServiceApi= ??
}

修改

我已经拥有该服务，但是我想避免每次将组件添加到视图时都调用该服务，即，如果可能的话，请在应用程序的生命周期中调用一次服务，如何实现？

Answer 1

您可以使用rx运算符share来防止副作用（在您的情况下为http请求）在订阅多个订阅者时被多次执行，并返回通过share从服务，即DataTypeService：

export class DataTypeService {

  dataTypes$: Observable<DataType>;

  constructor(private http: HttpClient) {
    this.dataTypes$ = this.http.get('/api/datatypes').pipe(share());
  }

  getDataTypes() {
    return this.dataTypes$;
  }
}

然后您可以在组件中注入DataTypeService，订阅getDataTypes()返回的观察对象，并且该请求将只执行一次。

constructor(private dataTypeService: DataTypeService){
   this.dataTypeService.getDataTypes().subscribe(dataTypes => {
       this.myListFromServiceApi = dataTypes;
   })
}

如果您只想在模板中使用这些数据类型，则还可以将getDataTypes()返回的可观察对象直接存储在组件中，并利用async管道

Answer 2

请参阅此stackblitz。通常，您只有一个sharedService。这将请求一次数据并将其存储为局部变量。仅其他两个组件（第一个和第二个）将服务注入构造函数中，并在sharedService中保留对成员变量的引用。这样，http调用只会发出一次。调用于：

Bar

如何使用服务在app.module上一次初始化变量，然后在其他组件中使用它？

2 个答案: