时间戳

首页 > 解决方案 > 如何在 Angular 中的兄弟组件之间共享数据

javascript - 如何在 Angular 中的兄弟组件之间共享数据

问题描述

我还在学习，我被卡住了，所以我需要问一个问题。我对输入输出装饰器的理解是，我需要将选择器添加到父级的 html 中才能使用它们，但就我而言，我认为这不是要走的路，但有人可以证明我错了。

案例：为了便于阅读，我拆分了组件。我有一个组件，data-fetch-transform，它从本地 JSON 文件中获取数据并对其进行一些调整，还有一个组件，它想要获取该数据以供进一步使用。

问题：我不确定如何从另一个组件中读取数据。在下面的示例中，如何在我的其他组件中获取 countryNumber 和 centerNumber 结果。我打算让 data-fetch-transform.component.ts 只是操纵数据并在其他组件中使用

目标组件

项目/src/app/data-use/data-use.component.ts

数据源组件

项目/src/app/data-fetch-transform/data-fetch-transform.component.ts

    import { Component, OnInit } from '@angular/core';
    import * as data from '../../../../../data/Data.json';
    
    @Component({
      selector: 'app-datafetch-transform',
      templateUrl: './datafetch-transform.component.html',
      styleUrls: ['./datafetch-transform.component.css'],
    })
    export class DatafetchComponent implements OnInit {
      public dataList: any = (data as any).default;
      dataPointCount = this.data.length!!;
    
     uniqueValues = (dt: [], sv: string) => {
        var valueList: [] = [];
        for (let p = 0; p < this.dataPointCount; p++) {
          valueList.push(dt[p][sv]);
        }
    
        var uniqueValues = new Set(valueList);
        return uniqueValues.size;
      };
    
    countryNumber=this.uniqueValues(this.dataList, 'Country')
    centerNumber=this.uniqueValues(this.dataList, 'Center Name')
    constructor() {}

    ngOnInit(): void {}
    }

标签： javascriptangular

解决方案

您不需要另一个组件来进行数据操作（data-fetch-transform），您需要一个服务（data-fetch-transform-service），您应该在其中执行逻辑。

这是您应该在服务中拥有的东西

 private _dataList = new behaviorSubject([]);
 public dataList$ = _dataList.asObservable();
    
        for (let p = 0; p < this.dataPointCount; p++) {
          // ... do your thing 
          _valueList.next(result);
        }

在您刚刚订阅服务的组件中：声明：

private _subscription = new Subscription()

在构造函数中：

private dataService:DataFetchTransformService

在 ngOnInit 中：

this_subscription.add(this.dataService.dataList$.subscribe((response:any)=>{
this.data = response;
}))

在 ngOnDestroy() 中：

ngOnDestroy(){
this._subscription.unsubscribe();
}

我强烈建议停止使用 any ，因为它会带来很多错误。另外，作为一个好的模式，我总是建议只在服务中使用behaviorSubject 作为私有变量，而用户作为数据的公共可观察对象。

为什么使用服务更好 您可以订阅 100 个组件，只需编写 4 行代码即可将数据带到任何地方。 不要忘记在 ngOnDestroy 中取消订阅 如果你不取消订阅，你会得到意想不到的行为。

推荐阅读