在同级组件之间传递数据

Question

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

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

但是当单击按钮时，我得到了错误：

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

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

Answer 1

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

所以，你需要添加一个输出到reportingFilterComponent和发射过滤器值，然后PRJ Shipping Component的输入具有事件处理程序来获取值，并把它传递到tjl shipment component类似下面

reportFilterComponent.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