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

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

要引用你的 child ，在这种情况下你希望你的 child 在你的 View 中，所以你必须使用 @ViewChildren 并且你必须等待 View 被初始化，所以你这样做

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

}

注意

afterViewInit() 中的循环将在您转译为 ES6 时起作用，因为 angular2 内部使用 Symbol.iterator .如果您要转译为 ES5，则必须解决它，因为 typescript does not support it (请参阅 plnkr 了解解决方法)。

这是 plnkr .

希望对你有帮助:)