@ViewChild और @ContentChild के बीच क्या अंतर है?

188

कोणीय 2 प्रदान करता है @ViewChild, @ViewChildren, @ContentChildऔर @ContentChildrenएक घटक के वंशज तत्वों क्वेरी करने के लिए सज्जाकार।

पहले दो और बाद वाले दो में क्या अंतर है?

angular

— आकर्षित मूर
स्रोत

3

इस लिंक ने मुझे नीचे दिए गए उत्तरों को पढ़ने के बाद blog.mgechev.com/2016/01/23/… पर मदद की । चियर्स :)

— गोपीनाथ शिव

256

मैं शैडो डोम और लाइट डोम शब्दावली का उपयोग करके आपके प्रश्न का उत्तर दूंगा (यह वेब घटकों से आया है, यहां देखें )। सामान्य रूप में:

शैडो डोम - आपके घटक का एक आंतरिक डोम है जो आपके द्वारा परिभाषित किया गया है ( घटक के निर्माता के रूप में) और एक एंड-यूज़र से छिपा हुआ है। उदाहरण के लिए:

@Component({
  selector: 'some-component',
  template: `
    <h1>I am Shadow DOM!</h1>
    <h2>Nice to meet you :)</h2>
    <ng-content></ng-content>
  `;
})
class SomeComponent { /* ... */ }

लाइट डोम - एक डोम है जो आपके घटक में आपके घटक की एंड-यूज़र आपूर्ति करता है। उदाहरण के लिए:

@Component({
  selector: 'another-component',
  directives: [SomeComponent],
  template: `
    <some-component>
      <h1>Hi! I am Light DOM!</h1>
      <h2>So happy to see you!</h2>
    </some-component>
  `
})
class AnotherComponent { /* ... */ }

तो, आपके सवाल का जवाब बहुत आसान है:

के बीच का अंतर @ViewChildrenऔर @ContentChildrenवह यह है कि @ViewChildrenछाया डोम में तत्वों थोड़ी देर के लिए देखो @ContentChildrenलाइट डोम में उनके लिए देखो।

— alexpods
स्रोत

10

Minko Gechew की ब्लॉग प्रविष्टि blog.mgechev.com/2016/01/23/… मेरे लिए अधिक मायने रखती है। @ContentChildren बच्चे हैं, जो कंटेंट प्रोजेक्शन (<एनजी-कंटेंट> </ ng-content> के बीच के बच्चे) द्वारा डाले गए हैं। मिन्कोस ब्लॉग से: "दूसरी ओर, ** तत्व जो किसी दिए गए घटक के मेजबान तत्व के उद्घाटन और समापन टैग के बीच उपयोग किए जाते हैं, उन्हें" सामग्री बच्चे ** कहा जाता है। " शैडो डोम और एंगुलर 2 में दृश्य विकृतीकरण को यहां देखा गया है: blog.thoughtram.io/angular/2015/06/29/… ।

— पश्चमी

4

मेरे लिए ऐसा लगता है कि @TemplateChildren(के बजाय @ViewChildren) या @HostChildren(के बजाय @ContentChildren) बहुत बेहतर नाम होंगे, जैसे कि इस संदर्भ में हम जिस चीज के बारे में बात कर रहे हैं वह देखने से संबंधित है, और राइट बाइंडिंग सामग्री से संबंधित भी है।

— सुपरजोस

34

@ViewChildren== आपका अपना बच्चा; @ContentChildren== किसी और का बच्चा

— कैंडिडज

106

नाम से पता चलता है, के रूप @ContentChildऔर @ContentChildrenप्रश्नों के अंदर मौजूदा निर्देशों वापस आ जाएगी <ng-content></ng-content>आपके विचार के तत्व है, जबकि @ViewChildऔर @ViewChildrenकेवल तत्वों है कि आपके विचार टेम्पलेट पर सीधे कर रहे हैं देखो।

— आकर्षित मूर
स्रोत

तो जब तक आपके विचार में घटक @ContentChild (ren) पर वापस नहीं आते हैं, तब तक @ViewChild (ren) का उपयोग करें।

— बेन टालिडोरोस

31

Angular Connect के इस वीडियो में ViewChildren, ViewChild, ContentChildren और ContentChild https://youtu.be/4YmnbGoh49U के बारे में बेहतरीन जानकारी है।

@Component({
  template: `
    <my-widget>
      <comp-a/>
    </my-widget>
`
})
class App {}

@Component({
  selector: 'my-widget',
  template: `<comp-b/>`
})
class MyWidget {}

के my-widgetदृष्टिकोण से, comp-aहै ContentChildऔर comp-bहै ViewChild। CompomentChildrenऔर ViewChildrenxerhild एकल उदाहरण लौटाते समय एक पुन: चलाने योग्य है।

— mithun_daa
स्रोत

यह बेहतर स्पष्टीकरण है। धन्यवाद :)

— जावेद

आपने एक स्पष्ट और सरल उदाहरण बनाया, लेकिन MyWidget का टेम्पलेट <comp-b><ng-content></ng-content></comp-b>सही होना चाहिए ?

— arjel

1

एक उदाहरण लेते हैं, हमारे पास एक घरेलू घटक और एक बाल घटक है और बाल घटक के अंदर एक छोटा बच्चा घटक है।

<home>
     <child>
           <small-child><small-child>
     </child>
</home>

अब आप @viewChildren के साथ घरेलू घटक के संदर्भ में सभी बच्चों के तत्वों को पकड़ सकते हैं क्योंकि ये सीधे घरेलू घटक के टेम्पलेट में जोड़े जाते हैं। लेकिन, जब आप <small-child>तत्व को चाइल्ड कंपोनेंट के संदर्भ से एक्सेस करने की कोशिश करते हैं तो आप इसे एक्सेस नहीं कर सकते क्योंकि यह सीधे चाइल्ड कंपोनेंट टेम्पलेट में नहीं जोड़ा जाता है। यह घरेलू घटक द्वारा बाल घटक में सामग्री के प्रक्षेपण के माध्यम से जोड़ा जाता है। यह वह जगह है जहां @contentChild आता है और आप इसे @contentChild के साथ पकड़ सकते हैं।

अंतर तब होता है जब आप नियंत्रक में तत्वों के संदर्भ तक पहुंचने का प्रयास करते हैं। आप सीधे @viewChild द्वारा घटक के टेम्पलेट में जोड़े गए सभी तत्वों को हड़प सकते हैं। लेकिन आप @viewChild के साथ अनुमानित तत्वों के संदर्भ को नहीं पकड़ सकते हैं अनुमानित प्रोजेक्ट तक पहुंचने के लिए आपको @contentChild का उपयोग करना होगा।

— देवता
स्रोत