typescript - How can I find child components by type -
i want know call method of child(a) parent(b). using output emit parent(b) child(a). , working. don't want using way. want know how can find child(a) parent(b).
a.component.ts
@import {component, eventemitter} '@angular/core'; @component({ selector: 'com-a', template: '<button (click)="senddatas()">coma btn</button>', outputs: ['getitems'] }) export class comaclass{ public getitem = new eventemitter<any>(); datas: any[] = ['abc', 'def']; constructor(){ console.log('hello, i'm component a'); } senddatas(){ this.getitem.emit(this.datas); } somemethod(){ console.log('call method of component a'); } }
and b.component.ts
@import {component, ...} '...'; @import {comaclass} '~~/a.component.ts'; @component({ selector: 'com=b' template: '<com-a name="coma1" (getitem)="getcomaitem1($event)"></com-a> <com-a name="coma2" (getitem)="getcomaitem2($event)"></com-a> <button (click)="callsomemethod()">comb btn</button>' }) export class combclass{ constructor(){ console.log('hello, i'm component b'); } private getcomaitem1(event){ console.log('coma1 output event'); } private getcomaitem2(event){ console.log('coma2 output event'); } callsomemethod(){ // how call coma1.somemethod()? } }
my source running , printing on console.
hello, i'm component b hello, i'm component hello, i'm component
i think b have compa1, compa2. b can call somemethod() of compa1. , compa2 too. want develop that. don't know how call compa1, compa2. think wrong? if think wrong. can do?? way using outputs?
please starter!!!
you can use @viewchildren(comaclass)
comaclass
instances in combclass
's view.
export class combclass{ @viewchildren(comaclass) coma:querylist<comaclass>; constructor() { // this.coma not yet initialized when constructor executed } ngoninit() { this.coma.toarray()[0].senddatas(); } callsomemethod(){ this.coma.toarray()[0].somemethod(); } }
you can use template variables address 1 specific instance
@component({ selector: 'com=b' template: '<com-a #coma1 name="coma1" (getitem)="getcomaitem1($event)"></com-a> <com-a #coma2 name="coma2" (getitem)="getcomaitem2($event)"></com-a> <button (click)="callsomemethod()">comb btn</button>' }) export class combclass{ @viewchild('coma1') coma1:comaclass; @viewchild('coma2') coma2:comaclass; constructor(){ // this.coma1 , this.coma2 not yet initialized when constructor console.log('hello, i'm component b'); } private getcomaitem1(event){ console.log('coma1 output event'); } private getcomaitem2(event){ console.log('coma2 output event'); } callsomemethod(){ this.coma1.somemethod(); this.coma2.somemethod(); } }
yet way pass reference using template variable
@component({ selector: 'com=b' template: '<com-a #coma1 name="coma1" (getitem)="getcomaitem1($event)"></com-a> <com-a #coma2 name="coma2" (getitem)="getcomaitem2($event)"></com-a> <button (click)="callsomemethod(coma1)">comb btn</button>' }) export class combclass{ constructor(){ // this.coma1 , this.coma2 not yet initialized when constructor console.log('hello, i'm component b'); } private getcomaitem1(event){ console.log('coma1 output event'); } private getcomaitem2(event){ console.log('coma2 output event'); } callsomemethod(coma1:comaclass){ coma1.somemethod(); } }
Comments
Post a Comment