Как найти дочерние компоненты по типу

Question

Я хочу знать, как вызвать метод child (A) из родителя (B). Использование Output испускает родительский элемент (B) из дочернего элемента (A). и очень хорошо работает. Но я не хочу использовать этот способ. Я хочу знать, как я могу найти child (A) от родителя (B).

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 

Я думаю, что у них есть CompA1, CompA2. B может вызвать someMethod() CompA1. и CompA2. Я хочу так развиваться. Но я не знаю, как назвать CompA1, CompA2. Мое Подумайте неправильно? Если я ошибаюсь. Что я могу сделать?? только путем использования выходов?

помогите стартер !!!

Answer 1

Вы можете использовать @ViewChildren(ComAClass), чтобы получить все ComAClass экземпляры в представлении ComBClass «s.

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()">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(); 
    } 
} 

Еще один способ передать ссылку также с помощью шаблона переменной

@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(); 
    } 
}