Question

我正在尝试在两个同级组件之间传递数据，并且组件结构如下所示。我需要在两个兄弟组件之间传递数据

我不想让组件成为父子组件，而是需要在同级组件之间传递数据

但是当单击按钮时，我收到错误消息：

TypeError：无法读取未定义的属性'settDate'

不确定我们是否在这里丢失了任何东西

Answer 1

由于您的组件位于同一父组件下，因此我假设PRJ Shipping Component是SMART组件，其余组件是DUMB组件（它们仅与输入和输出交互）

因此，您需要将输出添加到reportingFilterComponent并发出过滤器值，然后PRJ Shipping Component具有事件处理程序来获取值，并将其作为输入传递给tjl shipment component，如下所示

reportingFilterComponent.ts

@Output() filterChange : EventEmitter<ShipDateFilterModel[]> = new EventEmitter<ShipDateFilterModel[]>()

filterButtonClick() {
  this.filterChange.emit(/. your filter value../);
}

PRJ运输Component.html

<app-reporting (filterChange)="onFilterChange($event)"></app-reporting>

<app-tjl-shipment [filter]="filter"></app-tjl-shipment>

PRJ运输Component.ts

filter: ShipDateFilterModel[];

onFilterChange(event:ShipDateFilterModel[]) {
   this.filter = event;
}

tjl-shipment.component.ts

@Input() filter: ShipDateFilterModel[];

ngOnChanges(changes: SimpleChanges) {

  if (changes.filter && changes.filter.currentValue) {
     // do whatever is needed
  }
}

改进

为了保持DUMB组件DUMB，他们不应进行任何http调用或其他操作。因此，PRJ Shipping Component最好接收过滤器值并进行过滤操作，然后将过滤后的数据传递给tjl-shipment.component

另一种解决方案

您可以创建一个服务来保留组件之间的数据并通知更改，但是在您的情况下，它是needless complexity

在同级组件之间传递数据

1 个答案:

改进

另一种解决方案