在同級組件之間傳遞數據

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