@Viewchild का उपयोग करते हुए कई दृश्यचक्र तक पहुँचें

Question

मैंने एक कस्टम घटक बनाया है, जिसे मैंने एक लूप में रखा है जैसे

<div *ngFor="let view of views">

     <customcomponent></customcomponent>

</div>

जिसका उत्पादन होगा:

<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>

मैं जानना चाहूंगा कि कैसे इन घटकों का संदर्भ मुझे मिल सकता है @viewchild सिंटैक्स या किसी अन्य साधन का उपयोग करके जब इन घटकों की संख्या भिन्न हो सकती है

जब घटक को एक नाम दिया जा सकता है जैसे

<customcomponent #compID></customcomponent>

मैं इसे इस प्रकार संदर्भित कर सकता हूं:

@ViewChild('compID') test: CustomComponent

जब यह संभवत: सूचकांक का उपयोग कर रहा हो तो मैं इसका संदर्भ कैसे दूं?

(यह प्रश्न अन्य प्रश्नों के अनुसार एलीमेंटरीफ का उपयोग करने से संबंधित नहीं है जो पहले पूछे गए हैं जैसा कि नीचे सूचीबद्ध उत्तरों द्वारा देखा जा सकता है) यह प्रश्न एकाधिक @ViewChild तक पहुंचने और सूची प्रश्नों का उपयोग करने से संबंधित है।

Answer 1

का प्रयोग करें @ViewChildrenसे @angular/coreघटकों के लिए एक संदर्भ पाने के लिए

टेम्पलेट

<div *ngFor="let v of views">
    <customcomponent #cmp></customcomponent>
</div>

अंग

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components:QueryList<CustomComponent>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

लाइव डेमो

Comments

यह कहता है ._results एक निजी कार्य है। यह भी। घटकों सिर्फ एक विलक्षण घटक है मेरे लिए एक सूची नहीं है। कोई और मदद जो आप प्रदान कर सकते हैं?

— सैम अलेक्जेंडर

@SamAlexander आप #cmp नाम के साथ घटकों की सारणी प्राप्त करने के लिए this.compords.toArray () का उपयोग कर सकते हैं

— DavidGSola

यह अजाक्स प्रतिक्रिया पर कैसे काम करता है ?, @ViewChildren init व्यू के बाद चालू हो जाता है, लेकिन मॉडल के बाद नहीं (ngFor के लिए) बदलता है। मैं उसके लिए कैसे ट्रिगर कर सकता हूं?

— एलपोर्फिरियो

@elporfirio लागू करें AfterViewCheckedऔर विधि लिखें ngAfterViewChecked। दृश्य अपडेट होने के बाद यह विधि प्रत्येक परिवर्तन चक्र को चालू करती है। इसके भीतर, आप यह देख सकते हैं कि क्या आपके दृष्टिकोण को परिभाषित किया गया है। डॉक्स देखें

— बीटलज्यूइस

कोई बात नहीं, मैंने यह पाया जो चीजों को और अधिक विस्तार से बताता है: netbasal.com/… @ViewChildren में घटक के नाम का उपयोग करके HTML में आपके द्वारा असाइन किए गए #name का उपयोग करने की तुलना में एक अलग रिटर्न परिणाम देता है।

— rmcsharry

Answer 2

QueryList के साथ संयुक्त @ViewCildren डेकोरेटर का उपयोग करें। ये दोनों "@ कोणीय / कोर" से हैं

@ViewChildren(CustomComponent) customComponentChildren: QueryList<CustomComponent>;

प्रत्येक बच्चे के साथ कुछ करना ऐसा दिखता है: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

किया जा करने के लिए आगे प्रलेखन, angular.io पर नहीं है विशेष रूप से: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild