Question

如果需要在多个Angular智能组件中订阅相同的数据，我正在寻找如何简化代码的建议。

例如，此代码相同：

public item: Item | undefined;

public ngOnInit(): void {
  this.items$.subscribe(a => this.item = a);
}

一旦我在ngOnDestroy上添加取消订阅，代码重复就会增加更多。

是否有可能以某种方式使用简化组件？在根AppComponent中订阅或使用Value Providers？

管道，在我的理解中，如果在组件内使用this.item而不是模板时使用按钮点击/锤击手势/代码在ngOnChanges中的情况不是一种选择。

Answer 1

要分享Observable for multiple observers，您需要 share 之类的内容操作

示例：

import {Observable} from 'rxjs'; import {share} from 'rxjs/operators' export class dataService{ public data$=Observable<Idata[]> constructor(http:HttpClient) { this.data$=this.http.get<Idata[]>('https://jsonplaceholder.typicode.com/posts').pipe(share()); } public getPosts():Observable<Idata[]> { return this.data$ }}


此运算符是publish的特化，它创建了一个   当观察者的数量从零变为1时的订阅   与所有后续观察者共享该订阅，直至该订阅   观察者数量返回零，此时订阅   处置。

<强> Refer this for more

由于您希望在导航到新路线之前获得已解析数据，因此您可以使用Resolve后卫

在路由激活之前执行路由数据检索。 您可以使用 ActivatedRoute’s snapshot 对象的data属性访问已解析的数据，也可以订阅 ActivatedRoute {{1} 保存当前路径的静态和已解析数据的属性

<强> resolve.service.ts：

data

<强> routes.module.ts：

import { Injectable } from '@angular/core'; import { Resolve } from '@angular/router'; import {Observable} from 'rxjs'; @Injectable() export class resolver implements Resolve<Observable<any>> { constructor(private service:Service) {} resolve() { return this.dataService.getdata(); } }

<强> .component.ts：，

{ path: 'home', component: HomeComponent, resolve: { data: resolver, }, },

<强> STACKBLITZ DEMO

<强>参见

   1. fetch-data-before-navigating

的 Route Resolvers

订阅多个智能组件中的相同数据

1 个答案: