在兄弟组件之间传递数据

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 Shipping Component.html

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

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

PRJ Shipping 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