如何从 @Input 变量子值创建 Observable？答案

【问题标题】：How do I create Observable from an @Input variable child value?如何从 @Input 变量子值创建 Observable？
【发布时间】：2020-02-01 03:01:00
【问题描述】：

我有一个子组件，它从父组件的下拉框中获取 @Input 值。这个值有一个对象数组，我想将它们作为数据源传递给一个表，所以我需要构造一些 Observable 来维护它，并在 @Input 值发生变化时让它改变，等等......我知道这是一个基本的问题，但我仍然围绕着 Angular 设计范式。

给定一个@Input 值：

   @Input() parentObject: ParentObject

我尝试过像这样直接引用值：

   rowData = this.parentObject._rows;

这会中断，因为它是异步填充的，因此在运行时 parentObject 最初是未定义的。

我试过了：

   ngOnChanges(change: SimpleChanges){
      if (changes.parentObject.currentValue){
         rowData = changes.parentObject.currentValue._rows;
      }
   }

这会中断，因为 _rows 是一个数组而不是 Observable。我想我可以在设置时将 _rows 包装成一个 Observable ，但这似乎很hacky。

请注意，我并没有尝试将值传递回父级，只是在子组件的表中使用它。我还尝试使用 Subject 并且编译和运行良好，但由于某种原因，该表没有收到更新的数据。我已在此处包含该代码，因此更清楚我在做什么：

   rowData = new Subject<Row[]>();

   ngOnChanges(change: SimpleChanges){
      if (changes.parentObject.currentValue){
         this.rowData.next(changes.parentObject.currentValue._rows);
      }
   }

在我的 .html 中：

   <ag-grid-angular
     style="width: 500px; height: 500px;"
     class="ag-theme-balham"
     [rowData]="rowData | async"
     [columnDefs]="columnDefs">
   </ag-grid-angular>

我确信有一些我没有考虑的非常基本的交互方式。

【问题讨论】：

见@Output() 和EventEmitter。它与@Input 相反，因为组件可以在发生更改时广播回父组件。
How to pass values from child to parent component in Angular 4的可能重复
其实这个更适合作为副本。 Pass data from child to parent component Angular2
很抱歉没有更好地解释 - 不要试图将值传递给父级，只需在 [rowData]="rowData | async" 的表中使用它。我编辑了问题
我建议你添加一个minimal reproducible example。另见How to Ask。这将帮助其他愿意帮助您解决问题的人。

标签： angular

【解决方案1】：

我喜欢服务的工作方式。创建一个服务组件，命名为 EventService.... 然后像这样将 eventEmitters 添加到 EventService.TS 文件中。

SomeEvent = new EventEmitter<any>();

然后父子组件会各自导入EventService

import { EventService } from "../../services/event.service";

将此添加到父母和孩子的构造函数中：

private EventService: EventService,

准备就绪后，父级将触发事件。

EventService.SomeEvent.Emit(data);

确保孩子已经订阅了活动...

SomeEvent.Subscribe(data=>{//data is here});

【讨论】：