बच्चे को कोणीय 2 में माता-पिता की घटना के लिए सुनता है

Question 1

कोणीय डॉक्स में माता-पिता से बच्चे की घटनाओं को सुनने के बारे में एक विषय है। कोई बात नहीं। लेकिन मेरा उद्देश्य कुछ उल्टा है! मेरे ऐप में एक 'admin.component' है जो कि व्यवस्थापक पृष्ठ (साइडबार मेनू, टास्क बार, स्टेटस आदि) का लेआउट दृश्य रखता है।)। इस मूल घटक में मैंने व्यवस्थापक के अन्य पृष्ठों के बीच मुख्य दृश्य को बदलने के लिए राउटर सिस्टम को कॉन्फ़िगर किया है। परिवर्तन के बाद चीजों को बचाने के लिए समस्या है, उपयोगकर्ता टास्क बार में सेव बटन पर क्लिक करता है (जो admin.com में रखा गया है) और चाइल्ड कंपोनेंट को सेव स्टाफ करने के लिए उस क्लिक इवेंट को सुनना चाहिए।

Question 2

मुझे लगता है कि यह डॉक्टर आपके लिए उपयोगी हो सकता है:

https://angular.io/docs/ts/latest/cookbook/component-communication.html

वास्तव में आप एक अवलोकन योग्य / विषय का लाभ उठा सकते हैं जो अभिभावक अपने बच्चों को प्रदान करता है। ऐसा कुछ:

@Component({
  (...)
  template: `
    <child [parentSubject]="parentSubject"></child>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  parentSubject:Subject<any> = new Subject();

  notifyChildren() {
    this.parentSubject.next('some value');
  }
}

बच्चे का घटक इस विषय पर सदस्यता ले सकता है:

@Component({
  (...)
})
export class ChildComponent {
  @Input()
  parentSubject:Subject<any>;

  ngOnInit() {
    this.parentSubject.subscribe(event => {
      // called when the notifyChildren method is
      // called in the parent component
    });
  }

  ngOnDestroy() {
    // needed if child gets re-created (eg on some model changes)
    // note that subsequent subscriptions on the same subject will fail
    // so the parent has to re-create parentSubject on changes
    this.parentSubject.unsubscribe();
  }

}

अन्यथा, आप एक साझा सेवा का लाभ उठा सकते हैं जिसमें इस तरह के विषय शामिल हों ...

Question 3

उत्तर-आधुनिकता के लिए , बस मैंने सोचा कि मैं इसके लिए और अधिक पारंपरिक समाधान का उल्लेख करूंगा : बस ViewChild का संदर्भ प्राप्त करें और फिर इसके तरीकों में से एक को सीधे कॉल करें।

@Component({
  selector: 'app-child'
})
export class ChildComponent {

  notifyMe() {
    console.log('Event Fired');
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-child #child></app-child>`
})
export class ParentComponent {

  @ViewChild('child')
  private child: ChildComponent;

  ngOnInit() {
    this.child.notifyMe();
  }
}

Question 4

यदि मैं प्रश्न को सही ढंग से समझ पाता हूं तो अधिक नंगे हड्डियों का दृष्टिकोण यहां संभव हो सकता है। मान्यताओं -

ओपी के पास मूल घटक में एक सेव बटन है
जिस डेटा को सहेजना है, वह बाल घटकों में है
अन्य सभी डेटा जिन्हें बच्चे के घटक की आवश्यकता हो सकती है उन्हें सेवाओं से एक्सेस किया जा सकता है

मूल घटक में

<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>

और बच्चे में ..

prop1:boolean;
  @Input()
  set setProp(p: boolean) {
    // -- perform save function here
}

यह केवल बच्चे के घटक के लिए बटन क्लिक भेजता है। वहां से बाल घटक डेटा को स्वतंत्र रूप से बचा सकता है।

EDIT: यदि पैरेंट टेम्पलेट के डेटा को भी बटन क्लिक के साथ पास करना होगा, तो यह इस दृष्टिकोण के साथ भी संभव है। मुझे बताएं कि क्या ऐसा है और मैं कोड नमूने को अपडेट कर दूंगा।

Question 5

जो मिल रहे हैं उनके लिए Cannot read property 'notifyMe' of undefined

विधि के अंदर कॉल करके देखें ngAfterViewInit()की inteadngOnInit()