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

Question

在 Angular 2 中，如何从父组件类访问子组件类？例如

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
    }
}

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

Answer 1

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

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

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

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

注意：此代码 sn-p 适用于 angular2 rc4 版本。

Answer 2

这很简单，但您必须牢记几点，我将在下面详细说明，首先是代码。

要引用您的孩子，在这种情况下，您希望您的孩子在您的视图中，因此您必须使用 @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。

希望对你有帮助:)