Question

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

CASE：出于可读性目的，我拆分了组件。我有一个组件，data-fetch-transform，它从本地 JSON 文件中获取数据并对其进行一些调整，而另一个组件则希望将该数据用于进一步使用。

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

目标组件

<块引用>

project/src/app/data-use/data-use.component.ts

数据源组件

<块引用>

project/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 {}
    }

Answer 1

您不需要另一个用于数据操作的组件 (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 如果您不退订，则会出现意外行为。

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

1 个答案: