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

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

1. 的 Route Resolvers