タイプ別に子コンポーネントを見つけるには

Question

親（B）から子（A）メソッドを呼び出すことを知りたい。 出力を使用すると、子（A）から親（B）に放出されます。非常にうまく働いています。 しかし、私はこの方法を使いたくありません。私は親（B）から子供（A）を見つける方法を知りたい。

A.component.ts

@Import {Component, EventEmitter} from '@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'); 
    } 
} 

とB.component.ts

@Import {Component, ...} from '...'; 
@Import {ComAClass} from '~~/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 the comA1.someMethod()? 
    } 
} 

私のソースは、コンソール上で次のように実行して印刷されます。

Hello, I'm Component B 
Hello, I'm Component A 
Hello, I'm Component A 

私はBがCompA1、CompA2があると思います。 BはCompA1のsomeMethod（）を呼び出すことができます。 CompA2もあります。私はそのように発展したい。しかし、私はどのようにCompA1、CompA2を呼び出すのか分かりません。私の考えは間違っていますか？もし私の考えが間違っているなら。私に何ができる？？出力を使用する唯一の方法は？

スタート助けてください！

Answer 1

@ViewChildren(ComAClass)を使用すると、のすべてのComAClassインスタンスが表示されます。あなたはまた、1つの特定のインスタンス

@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 and this.comA2 is not yet initialized when the constructor is 
     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(); 
    } 
} 

に対処するためのテンプレート変数を使用することができます

export class ComBClass{ 
    @ViewChildren(ComAClass) comA:QueryList<ComAClass>; 

    constructor() { 
     // this.comA is not yet initialized when the constructor is executed 
    } 

    ngOnInit() { 
     this.comA.toArray()[0].sendDatas(); 
    } 

    callSomeMethod(){ 
     this.comA.toArray()[0].someMethod(); 
    } 
} 

は、さらに別の方法も

@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 and this.comA2 is not yet initialized when the constructor is 
     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(); 
    } 
}