如何在Angular中從父級到組件多次傳遞相同的數據？

Question

我有兩個相互通信的組件，一個常規組件（父）和一個bootstrap模式組件（子）。 父項和子項都有一個包含記錄的表。 在父表中，每個記錄都有一個復選框。 當我選中一個或多個復選框並單擊某個按鈕時，會觸發一個嘗試填充子表的事件。

孩子的表被填充，我有能力刪除我想要的記錄。 如果我刪除了一些記錄，關閉模態（關閉子項）並決定再次從父項向子項發送相同的數據，則不會觸發Input事件。 但是，如果我選擇檢查父級中的不同記錄並將其傳遞給子級，則會正確觸發Input事件。

這就是我所擁有的：

ParentComponent.component.html

<child-component #createNewProductRequestModal [data]="newProductRequest"></m-child-component>

ParentComponent.component.ts

private onNewProductRequest(toSend){
  this.newProductRequest = toSend;
  $('#createNewProductRequestModal').appendTo("body").modal('toggle');
}

ChildComponent.component.ts

@Input('data')
set data(data: any) {
  if (data !== undefined || data !== "") {
    this.products = data;
    console.log("data");
  }
}

constructor() { }

ngOnInit() { }

要在呈現子表之前測試數據是否已更改，我將父項傳遞的數據記錄到控制台。 使用此代碼，每次執行父項的onNewProductRequest(toSend)而不更改toSend變量時，子項的模態呈現但不執行Input事件，因此不更改數據。

Answer 1

您可以使用ngOnChanges

角度文檔的定義

在默認更改檢測器檢查數據綁定屬性后立即調用的回調方法（如果至少有一個已更改），並且在檢查視圖和內容子項之前。

你有一些關於子元素的輸入

  @Input() nameOfInput: any;

您的子組件必須實現OnChanges如下所示：

export class ChildComponent implements OnChanges {

在下一步中，您希望在每次輸入變化時都做一些事情。

 ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
    if ('nameOfInput' in changes) {
        console.log('Old value: ', changes.nameOfInput.previousValue);
        console.log('New value: ', changes.nameOfInput.currentValue);
    }
  }

看看這個例子。

例

Answer 2

當您將數據分配給輸入時，第一次檢測到更改，因為對象更改，但是如果您更改對象內的屬性，則引用和對象仍然相同，因此更改不會觸發。 解決方案是克隆您通過輸入發送給孩子的對象。 嘗試更改此行：

this.newProductRequest = toSend;

為了這：

this.newProductRequest = {...toSend};

Answer 3

當您第二次將相同的數據發送到子組件時，Angular不會將其注冊為對@Input（）的更改，因為您傳遞的是第一次傳遞的相同Object引用，而Angular只是比較引用。

嘗試這個小改動：

private onNewProductRequest(toSend){
  this.newProductRequest = { ...toSend };
  $('#createNewProductRequestModal').appendTo("body").modal('toggle');
}

這意味着您將數據對象的淺表副本傳遞給子對象，而不僅僅是原始對象的修改版本。 由於這個淺拷貝將具有與原始對象不同的引用，因此Angular會將其作為更改進行拾取並觸發您的@Input設置器。

Answer 4

嘗試

在兒童組件中

import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';
ngOnChanges(changes: SimpleChanges) {
     for (let propName in changes) {  
    let change = changes[propName];
let curVal  = JSON.stringify(change.currentValue);
    let prevVal = JSON.stringify(change.previousValue);

        console.log(curVal);
        console.log(prevVal);
     }
}