Question

我有一个子组件，该子组件从父组件的下拉框中获取@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中，但这似乎很麻烦。

请注意，我不是在尝试将值传递回父级，而只是在子级组件的表中使用它。我还尝试了使用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>

我确定我没有考虑进行这种交互的一些非常基本的方法。

Answer 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});

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

1 个答案: