使用NgFor創建子組件然後調用任何發生事件的方法

我可以考慮一些可能會破解這個方法的方法，但是我最想獲得有關如何使用這種方法的一些建議。使用NgFor創建子組件然後調用任何發生事件的方法

我放在一起an example of what I'm doing。

主要組件使用NgFor遍歷列表並創建一堆子組件。
每個孩子點擊時發出一個事件，由父母挑選。每個孩子也有一個方法update()。

我想要的是我的主要組件獲取對任何一個孩子發出事件的引用並調用其update()方法的正確方法。

看起來非常簡單（可能非常簡單），但它是我正在構建的應用程序的一箇中心功能，所以我想盡可能地做到儘可能乾淨。

乾杯您的幫助

來源

2016-12-03 popClingwrap

，我想我不明白你想做的事，爲什麼不直接調用'更新（）'方法事件時發出的？ –

你說得對，在我的例子中這將是明智的，但我的實際應用程序更復雜。我試圖簡化，也許花了太多時間 - 我需要父母存儲對發射該事件的孩子的引用。父母然後去做一些其他的事情，最後基於另一個觸發器回電給孩子。我真的只需要一種方法來讓發送事件的孩子掛鉤，以便以後可以回調。對不起，我可能沒有把這個問題和我可能有的一樣說出來。 – popClingwrap

好吧，現在我明白了，所以我認爲JB Nizet的答案就是你要找的。 –

最簡單的方法是使用模板變量引用子組件：

<my-child #child *ngFor="let row of rowList;" [id]="row.name" 
      (onMD)="processClick($event); child.update()"></my-child>

更新演示：http://plnkr.co/edit/zA80iNsLHHULGx9Rbffw?p=preview

來源

2016-12-03 17:06:57

有沒有辦法像'@ ViewChild'一樣使用'@ ViewChild'來引用控制器中的子項，就像我們不使用'* ngFor'時可以做的那樣？ –

這工作得很好。我可以將'child'作爲第二個參數傳遞給'processClick（）'並將其存儲在父項中的一個變量中。稍後我可以使用它回電給任何被點擊的孩子。死後很簡單，一旦你知道如何，因爲我懷疑它會是:)。感謝您的建議 – popClingwrap

有ViewChildren。但是，這不會幫助你找到哪個孩子剛剛被點擊（除了通過循環和找到在事件中有id的那個） –

由於角2擁抱單向數據流範例，我會爭辯說，解決此問題的「最」'角''方法是根據而不是調用update()方法。兒童組件的狀態應由父母提供。

無論何時發生點擊，應該在App（父級）組件中計算新狀態，並將傳遞到ChildComponent。

走出這種方式，您將需要一個附加屬性，以便擴展父舉行的狀態（例如clicked）：

rowList = [{name: "Alice", clicked: false}, ...];

（當然，因爲undefined具有相同的邏輯值作爲false，顯式聲明並不是真的有必要。）

單擊，在處理程序方法中，計算新狀態。在這種情況下，它只是一個簡單的布爾值的變化：

processClick(id){ 
    this.recentClick = id; 
    // Create the new array for immutability benefits. 
    this.rowList = this.rowList.map(person => { 
    if (person.name === id) { 
     return {name: person.name, clicked: true}; 
    } else { 
     return person; 
    } 
    }) 
}

值傳遞到孩子，因爲任何其他@Input。現在

<my-child *ngFor="let row of rowList;" [id]=row.name [clicked]=row.clicked (onMD)="processClick($event)"></my-child>

，子組件可以改變它取決於clicked屬性的值行爲。作爲獎勵，當使用不可變數據時，您可以將更改檢測策略更改爲onPush,some performance benefits。

@Component({ 
    // ... 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class ChildComponent { 
    @Input() clicked: boolean; 

    get prefix() { 
    return this.clicked ? "Bye!" : "Hi"; 
    } 
    // ... 
}

這種方法有很多好處。

潛在的子組件中沒有隱藏狀態。父母的「單詞」是絕對的（所謂的「單一的真相源」）。
父母並不真正需要知道或關心孩子用數據做什麼或需要何時更新。
您可以輕鬆地將數據提取到其他位置，而且您不需要編寫任何代碼就可以使update()行爲有效。

全面實施應該是這樣的：http://plnkr.co/edit/IP8iLKxKGCjHOdgPHJ0h?p=preview

來源

2016-12-03 17:39:43

我在看到這個之前接受了另一個答案，現在我發生了衝突。接受的答案完全按照我的意願工作，並且是我期待的那種解決方案，但是我看到您的意識正在接近，並且可以看到它是如何比我長期前往的更清晰的解決方案。我可能會用這個，我認爲非常感謝你提供了一個非常好的，深入的答案。 – popClingwrap

使用NgFor創建子組件然後調用任何發生事件的方法

回答

相關問題