Question

在Angular 2中，如何从父组件类访问子组件类？ e.g。

import {Component, View} from 'angular2/core';

@Component({selector: 'child'})
@View({template: `...`})
class Child {
    doSomething() {
        console.log('something');
    }
}

@Component({selector: 'parent'})
@View({
    directives: [Child],
    template: `<child></child>`
})
class Parent {
    constructor() {
        //TODO: call child.doSomething() when the child component is ready
    }
}

在此示例中，如何从Child组件的构造函数或某些回调函数调用doSomething()组件的Parent方法。

Answer 1

这很简单，但你必须记住以下几点，首先是代码。

要引用您的孩子，在这种情况下，您希望您的孩子在您的视图中，因此您必须使用@ViewChildren并且必须等待视图初始化以便

@Component({
    selector: 'hello',
    template: `<child></child>`,
    directives : [Child]
})
export class Parent implements AfterViewInit {
  @ViewChildren(Child) children: QueryList<Child>;

  afterViewInit() {
    for(let child of this.children) {
      child.doSomething();
    }
  }

}

注意

如果您要转换为ES6，则afterViewInit()内的循环将起作用，因为angular2内部使用Symbol.iterator。如果您正在转发到ES5，那么您必须解决它因为typescript does not support it（请参阅plnkr以获取解决方法）。

这里是plnkr。

我希望它有所帮助：）

Answer 2

您可以在父组件中使用@ViewChild来访问子组件的任何方法。

    @Component({
      selector: 'parent',
      directives: [Child]
    })

    export class Parent {
        @ViewChild(Child) childComponent: Child;

        ngAfterViewInit() {
        // The child is available here
        childComponent.doSomething();
      }
    }

注意：此代码段适用于angular2 rc4版本。

如何从Angular2中的父组件类访问子组件类？

2 个答案: