मेरे पास एक उत्प्रेरक टेम्पलेट है जो टेम्पलेट को इसके प्रतिपादन को संदर्भित करता है। मेरे पास मूल टेम्पलेट में एक विधि है जिसे मैं बाल टेम्पलेट में लागू करना चाहता हूं (कुछ डीआई संबंधित कारणों के कारण संदर्भ घटक में मूल टेम्पलेट घटक.टीएस को उप-वर्गीकृत नहीं करना)। मैं इसे किस तरह लूं?

originator.component.ts

export class OriginatorComponent implements OnInit {
.....
    execute() {
        // Execute some code
    }

    retrieve() {
        // Execute some code
    }
}

originator.component.html

<ng-container *ngIf="test === 'abc'">
    <ng-container *ngTemplateOutlet="abcdef"></ng-container>

    <ng-template #abcdef>
      <foo-template></foo-template>
    </ng-template>

foo.component.ts

@Component({
    selector: 'foo-component',
    templateUrl: './foo-component.component.html',
    styleUrls: ['./foo-component.component.scss']
})
export class FooComponent implements OnInit {
.....
    someMethod1() {
        execute();    // <--- HOW DO I DO THIS? EXECUTE Originating templates method?
    }

    someMethod2() {
        retrieve();    // <--- HOW DO I DO THIS? EXECUTE Originating templates method?
    }
}
2
Lester Gray 23 अक्टूबर 2019, 20:32

2 जवाब

सबसे बढ़िया उत्तर

मैं सुझाव दूंगा कि बच्चे में मूल पद्धति को लागू करने की कोशिश न करें। बच्चे से माता-पिता से संवाद करने के लिए इवेंट एमिटर का उपयोग करने पर विचार करें https ://angular.io/guide/component-interaction#parent-listens-for-child-event

प्रवर्तक घटक:

export class OriginatorComponent implements OnInit {
    .....
    onExecute() {
        // Execute some code
    }
}

प्रवर्तक घटक टेम्पलेट:

<ng-container *ngIf="test === 'abc'">
  <ng-container *ngTemplateOutlet="abcdef"></ng-container>
</ng-container>

<ng-template #abcdef>
  <foo-template (execute)="onExecute()" ></foo-template>
</ng-template>

फू घटक

@Component({
   selector: 'foo-component',
   templateUrl: './foo-component.component.html',
   styleUrls: ['./foo-component.component.scss']
})
export class FooComponent implements OnInit {
    @Output() execute = new EventEmitter();
    .....
    someMethod() {
        this.execute.emit(); // you can send any variable to parent
    }
}

जब this.execute.emit(); को सक्रिय किया जाता है, तो आपके मूल तत्व (onExecute) में आपके हैंडलर को कॉल किया जाएगा।

संपादित करें

यह रहा एक स्टैकब्लिट्ज डेमो

0
C_Ogoo 5 नवम्बर 2019, 15:32
दिलचस्प। मेरे पास मूल घटक execute() retrieve() में एक से अधिक विधियाँ हैं। क्या कोई इस दृष्टिकोण के माध्यम से एक से अधिक उत्सर्जक पारित कर सकता है?
 – 
Lester Gray
23 अक्टूबर 2019, 21:39
स्टैकब्लिट्ज डेमो जोड़ा, उत्सर्जन देखने के लिए कंसोल की जांच करें: stackblitz.com/edit/angular-1h1rdz ए>
 – 
C_Ogoo
23 अक्टूबर 2019, 21:48
<ng-template #abcdef>
    <foo-component></foo-component>
</ng-template>

और आपके घटक फ़ाइल में उपयोग करें

@ViewChild(FooComponent  ) ref: FooComponent;

ngAfterViewInit() { this.ref.someMethod1(); } में कहा जाता है।

0
C_Ogoo 28 पद 2019, 17:26
धन्यवाद। मैंने यह कोशिश की लेकिन मुझे यह त्रुटि मिलती है 'लेखन त्रुटि: अपरिभाषित की संपत्ति 'someMethod' नहीं पढ़ सकता)
 – 
Lester Gray
23 अक्टूबर 2019, 21:28