在同级组件之间传递数据

Question

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

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

但是当点击按钮时出现错误：

TypeError: Cannot read property 'settDate' of undefined

不确定这里是否遗漏了什么

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

在同级组件之间传递数据

Passing Data between sibling components

javascript

typescript

angular

angular7

改进

另一个解决方案