मूल घटक के कोणीय 2 कॉल फ़ंक्शन

Question

मेरे पास एक ऐप है जहां मेरे पास अपलोड घटक है जहां मैं एक फ़ाइल अपलोड कर सकता हूं। में अंतर्निहित है body.component।

अपलोड करने पर, यह BodyComponent.thefunction()मूल घटक के एक फ़ंक्शन (जैसे ) का उपयोग करना चाहिए ( डेटा को अपडेट करने के लिए कॉल करें): लेकिन केवल अगर यह माता-पिता विशेष रूप से है body.component। अपलोड को अलग-अलग व्यवहार के साथ कहीं और भी इस्तेमाल किया जा सकता है।

जैसे कुछ parent(this).thefunction(), कैसे करना है?

Answer 1

मैं बाल घटक में एक कस्टम ईवेंट बनाऊंगा। ऐसा कुछ:

@Component({
  selector: 'child-comp',
  (...)
})
export class ChildComponent {
  @Output()
  uploaded = new EventEmitter<string>();

  uploadComplete() {
    this.uploaded.emit('complete');
  }

इस घटना पर आपका मूल घटक पंजीकृत हो सकता है

@Component({
  template `
    <child-comp (uploaded)="someMethod($event)"></child-comp>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  (...)

  someMethod(event) {
  }
}

एक और तरीका बच्चे में मूल घटक को इंजेक्ट किया जाएगा, लेकिन वे दृढ़ता से एक साथ जुड़े होंगे ...

Comments

किसी भी विचार क्यों मैं एक आउटपुट अपरिभाषित त्रुटि है? इसे आयात करके शीर्ष पर टाइपस्क्रिप्ट में परिभाषित किया गया है angular2/core। कंसोल लॉग में कोणीय 2-पॉलीफिल्स के साथ एक समस्या दिखाई देती है

— पास्कलवूटेन

ओह मेरे जवाब में एक टाइपो है: @Ouputइसके बजाय @Output। यह समस्या हो सकती है ... मैंने अपना उत्तर अपडेट कर दिया।

— थिएरी टेम्पलियर

हे, ध्यान नहीं दिया। वह यह था।

— पास्कलवीकूटेन

अब एक uploadComplete is not definedनोट मिल रहा है कि मैंने सिर्फ उदाहरण के रूप में इनकी नकल की है। माता-पिता के पास "someMethod" भी है, लेकिन यह पहले से ही एक मुद्दा है uploadComplete। मूल घटक बच्चे के नोड पर बाध्यकारी (अपलोड) बंधन का उपयोग करता है, और इसमें पहले से ही एक निर्देश के रूप में बच्चा था।

— पास्कलवूटन

@Component के अंदर निर्देश और पाइप को कोणीय RC6 से हटा दिया गया है।

— एलेक्स 351

Answer 2

नीचे नवीनतम में मेरे लिए काम किया गया है

Angular5

class ChildComponent {
  @Output() myEvent = new EventEmitter<string>();

  callParent() {
    this.myEvent.emit('eventDesc');
  }
}

के ParentTemplateटेम्पलेट में

<child-component (myEvent)="anyParentMehtod($event)"

Comments

यह एक अच्छा समाधान है, क्योंकि इसका सरल, और माता-पिता यह तय करते हैं कि किस पद्धति को कॉल करना है। मुझे पसंद है :-)

— जेट

अगर मैं राउटर-आउटलेट का उपयोग कर रहा हूं तो क्या होगा? क्या मैं अभी भी (myEvent) का उपयोग कर सकता हूं?

— रॉबर्ट विलियम्स

इसका मूल घटक के अंदर उपयोग किए जाने वाले बाल घटक के लिए। राउटर-आउटलेट के बारे में निश्चित नहीं है। हो सकता है यह सवाल आपकी मदद करे। stackoverflow.com/questions/45949476/…

— शब्बीर धनंगोट

Answer 3

शामिल घटनाओं के बिना समाधान।

मान लीजिए कि मेरे पास एक है ChildComponentऔर इससे मैं उस विधि को कॉल करना चाहता हूं myMethod()जो ParentComponentमूल माता-पिता के संदर्भ को ध्यान में रखते हुए संबंधित है ।

मूल घटक वर्ग:

@Component({ ... })
export class ParentComponent {

    get myMethodFunc() {
        return this.myMethod.bind(this);
    }

    myMethod() {
         ...
    }
}

मूल टेम्पलेट:

<app-child [myMethod]="myMethodFunc"></app-child>

बाल टेम्पलेट

@Component({ ... })
export class ChildComponent {

    @Input() myMethod: Function;

    // here I can use this.myMethod() and it will call ParentComponent's myMethod()
}

Comments

मैंने इसका उपयोग करने की कोशिश की है लेकिन यह मेरे लिए काम नहीं करता है। MyMethod के मेरे संस्करण में, यह मूल घटक पर एक टैबसेट का संदर्भ देता है (मैं माता-पिता के बच्चे से टैब स्विच करने का प्रयास कर रहा हूं)। जब मैं जनक में इसका संदर्भ देता हूं, तो सब कुछ काम करता है। बच्चे से यह मायमैथोड में हो रहा है, लेकिन टैब नहीं बदल रहा है। तो मैं सोच रहा था कि यह जिस टैबसेट को संदर्भित कर रहा है वह असली की एक प्रति है जब बच्चा इसे एक्सेस कर रहा है। मुझे वास्तव में यकीन नहीं है कि यहाँ क्या हो रहा है जब this.myMethod.bind(this)लौटा जा रहा है। (संभवतया मैं इसके बजाय मौलिक रूप से कुछ गलत कर रहा हूँ।)

— काथराइन ओसबोर्न

मुझे पता है लेकिन मैं 8 वें संस्करण का उपयोग नहीं कर रहा हूं। Ionic 3 के लिए मुझे इसकी आवश्यकता है जो 5 संस्करण का उपयोग करता है।

— वासिलिस ग्रीस

@VasilisGreece मुझे यकीन नहीं है कि आप कैसे मदद कर सकते हैं, लेकिन मैं दृढ़ता से आपको नवीनतम आयोनिक संस्करण (वर्तमान में 4) में अपडेट करने का सुझाव देता हूं

— फ्रांसेस्को बोरज़ी

अनावश्यक आयात से बचने के लिए माता-पिता की विधि को कॉल करने का सबसे सरल और सबसे सीधा तरीका। 2020-11-13 पर कोणीय 10 का उपयोग करना। की सराहना की।

— CPHPython

Answer 4

आप मूल घटक को चाइल्ड घटक को इंजेक्ट कर सकते हैं।

अधिक जानकारी के लिए देखें
- मैं एक मूल घटक को एक बच्चे के घटक में कैसे इंजेक्ट कर सकता हूं?
- कोणीय 2 बाल घटक माता-पिता घटक को संदर्भित करता है इस तरह से आप यह सुनिश्चित कर सकते हैं कि thefunction()केवल तभी बुलाया जाता है जब माता-पिता ए body.component।

constructor(@Host() bodyComp: BodyComponent) {

अन्यथा @Output()बच्चे से लेकर अभिभावक तक संवाद करना पसंद किया जाता है।

Comments

Btw, मुझे करना था constructor(@Host() bodyComp: BodyComponent).. शायद यह हाल ही में बदल गया था। महान काम करता है, thx!

— एड़ी वेरब्रुगन

बहुत बहुत धन्यवाद, मैंने कुछ मिलाया - तय किया

— गुंटर ज़ोचबॉयर