Typescript 如何按类型查找子组件

我想知道从父（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');
    }
}

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

我想B有CompA1，CompA2。B可以调用CompA1的someMethod（）。还有CompA2。我想这样发展。但我不知道怎么称呼CompA1，CompA2。我的想法是错的？如果我的想法错了。我能做什么？？使用输出的唯一方法

---

请帮助初学者

您可以使用

@ViewChildren（ComAClass）

在

ComBClass

的视图中获取所有

ComAClass

实例

导出类{
@ViewChildren（ComAClass）昏迷：QueryList；
构造函数（）{
//在执行构造函数时，this.comA尚未初始化
}
恩戈尼尼特（）{
this.comA.toArray（）[0].sendDatas（）；
}
callsomethod（）{
this.comA.toArray（）[0].someMethod（）；
}
}

您还可以使用模板变量来处理一个特定实例

@组件({
选择器：“com=b”
模板：'
梳形btn'
})
出口类{
@ViewChild（'coma1'）coma1:ComAClass；
@ViewChild（'coma2'）coma2:ComAClass；
构造函数（）{
//当构造函数启动时，this.comA1和this.comA2尚未初始化
log（'Hello，我是组件B'）；
}
私有getComAItem1（事件）{
console.log（“comA1输出事件”）；
}
私有getComAItem2（事件）{
console.log（“comA2输出事件”）；
}
callsomethod（）{
this.comA1.someMethod（）；
this.comA2.someMethod（）；
}
}

另一种方法是使用模板变量传递引用

@组件({
选择器：“com=b”
模板：'
梳形btn'
})
出口类{
构造函数（）{
//当构造函数启动时，this.comA1和this.comA2尚未初始化
log（'Hello，我是组件B'）；
}
私有getComAItem1（事件）{
console.log（“comA1输出事件”）；
}
私有getComAItem2（事件）{
console.log（“comA2输出事件”）；
}
callSomeMethod（comA1:ComAClass）{
comA1.someMethod（）；
}
}

您可以使用

@ViewChildren（ComAClass）

在

ComBClass

的视图中获取所有

ComAClass

实例

导出类{
@ViewChildren（ComAClass）昏迷：QueryList；
构造函数（）{
//在执行构造函数时，this.comA尚未初始化
}
恩戈尼尼特（）{
this.comA.toArray（）[0].sendDatas（）；
}
callsomethod（）{
this.comA.toArray（）[0].someMethod（）；
}
}

您还可以使用模板变量来处理一个特定实例

@组件({
选择器：“com=b”
模板：'
梳形btn'
})
出口类{
@ViewChild（'coma1'）coma1:ComAClass；
@ViewChild（'coma2'）coma2:ComAClass；
构造函数（）{
//当构造函数启动时，this.comA1和this.comA2尚未初始化
log（'Hello，我是组件B'）；
}
私有getComAItem1（事件）{
console.log（“comA1输出事件”）；
}
私有getComAItem2（事件）{
console.log（“comA2输出事件”）；
}
callsomethod（）{
this.comA1.someMethod（）；
this.comA2.someMethod（）；
}
}

另一种方法是使用模板变量传递引用

@组件({
选择器：“com=b”
模板：'
梳形btn'
})
出口类{
构造函数（）{
//当构造函数启动时，this.comA1和this.comA2尚未初始化
log（'Hello，我是组件B'）；
}
私有getComAItem1（事件）{
console.log（“comA1输出事件”）；
}
私有getComAItem2（事件）{
console.log（“comA2输出事件”）；
}
callSomeMethod（comA1:ComAClass）{
comA1.someMethod（）；
}
}

Wow！！！！！！真的谢谢你@ViewChild真的在工作！！非常感谢你！！！顺便说一句你的另一种方法不起作用。。。。这看起来比使用ViewChild简单。哪种方法不起作用？最后一个？您是否遇到错误？callSomeMethod（comA1:ComAClass）{this.comA1.someMethod（）；}我猜找不到this.comA1。我的webstorm显示红色文本，并在工具提示上打印未解析的变量。错误：在web控制台上找不到someMethod（）。但是不用这个。它正在工作！真的谢谢你！！！！我不会忘记你的答案！对不起，复制粘贴错误。在这种情况下，

这是错误的。

是因为我们引用了参数

comA1

。在webstorm控制台中，属性“comA1”在类型“ComBClass”上不存在。无法读取未定义的属性“someMethod”。在网络控制台。哇！！！！！！真的谢谢你@ViewChild真的在工作！！非常感谢你！！！顺便说一句你的另一种方法不起作用。。。。这看起来比使用ViewChild简单。哪种方法不起作用？最后一个？您是否遇到错误？callSomeMethod（comA1:ComAClass）{this.comA1.someMethod（）；}我猜找不到this.comA1。我的webstorm显示红色文本，并在工具提示上打印未解析的变量。错误：在web控制台上找不到someMethod（）。但是不用这个。它正在工作！真的谢谢你！！！！我不会忘记你的答案！对不起，复制粘贴错误。在这种情况下，

这是错误的。

是因为我们引用了参数

comA1

。在webstorm控制台中，属性“comA1”在类型“ComBClass”上不存在。无法读取未定义的属性“someMethod”。在web控制台上。

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