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

【问题标题】：Subscribing to the same data in multiple smart components订阅多个智能组件中的相同数据
【发布时间】：2018-06-05 15:03:38
【问题描述】：

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

例如，这段代码是一样的：

public item: Item | undefined;

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

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

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

据我了解，在处理 ngOnChanges 中的按钮单击/hammerjs 手势/代码等情况下，当this.item 用于组件而不是模板时，管道不是一个选项。

【问题讨论】：

标签： angular

【解决方案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 的特化，它创建一个当观察者的数量从零变为一时订阅，然后与所有后续观察者共享该订阅，直到观察者数量归零，此时订阅被处置。

Refer this for more

由于您想在导航到新路线之前获取已解析的数据，您可以使用Resolveguard

在路由激活之前执行路由数据检索。 您可以使用 ActivatedRoute’s snapshot 对象的 data 属性访问解析的数据或订阅 ActivatedRoute data 属性当前路由的静态和解析数据

resolve.service.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();
      }
    }

routes.module.ts：

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

.component.ts:,

  constructor( private route:ActivatedRoute) {
                 this.route.data.subscribe(value=>{
                       console.log(value);
                       });}

STACKBLITZ DEMO

参考

1. fetch-data-before-navigating

Route Resolvers

【讨论】：

然后将dataService注入智能组件再次订阅？我在这里看不到代码重用。还是我错过了什么？
好吧，角度风格指南说逻辑可以被多个组件重用当放置在服务中并通过函数公开时。所以注入服务并订阅
即使将数据保存在本地存储中也需要您将其注入组件中才能获取值
希望this能给你一个更清晰的画面
不不，我的目标是做一些类似于@Input 的事情，但在更高的层次上。也许 AppComponent 可能负责订阅并将解析的数据传递给路由器出口。或者，该值甚至可以在更高级别上解析并作为值注入。