调用子组件的方法

Question

我有一个嵌套的子组件,如下所示:

<app-main>
    <child-component />
</app-main>

我的appMain组件需要在子组件上调用方法.

如何在子组件上调用方法？

Answer 1

您可以使用获取元素的引用

@ViewChild('childComponent') child;

其中childComponent是模板变量<some-elem #childComponent>`或

@ViewChild(ComponentType) child;

其中ComponentType是组件或指令的类型,然后在ngAfterViewInit事件处理程序中调用child.someFunc().

ngAfterViewInit() {
  console.log(this.child);
}

另请参见获取模板中的元素

Answer 2

父母和孩子可以通过数据绑定进行通信.

例:

@Component({
    selector: 'child-component',
    inputs: ['bar'],
    template: `"{{ bar }}" in child, counter  {{ n }}`
})
class ChildComponent{
    constructor () {
        this.n = 0;
    }
    inc () {
        this.n++;
    }
}

@Component({
    selector: 'my-app',
    template: `
        <child-component #f [bar]="bar"></child-component><br>
        <button (click)="f.inc()">call child func</button>
        <button (click)="bar = 'different'">change parent var</button>
    `,
    directives: [ChildComponent]
})
class AppComponent {
    constructor () {
        this.bar = 'parent var';
    }
}

bootstrap(AppComponent);  

演示

#f创建对子组件的引用,可以在模板中使用或传递给函数.来自父级的数据可以通过[ ]绑定传递.

Answer 3

作为儿子的组成部分

@Component({
    // configuration
    template: `{{data}}`,
    // more configuration
})
export class Son {

  data: number = 3;

  constructor() { }

  updateData(data:number) {
    this.data = data;
  }

}

有一个父亲组成部分

@Component({
    // configuration
})
export class Parent {
  @ViewChild(Son) mySon: Son;

  incrementSonBy5() {
    this.mySon.updateData(this.mySon.data + 5);
  }
}

在父亲的模板中

<son></son>
<button (click)="incrementSonBy5()">Increment son by 5</button>

此解决方案仅适用<son></son>于父模板中的一个实例.如果您有多个实例,则只能在模板的第一个实例中使用.