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视图中的所有ComBClass个实例。

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

如何按类型查找子组件

1 个答案: