typescript - Angular 2 - 获取组件实例

Question

我有两个这样的组件:

@Component({
    selector: 'comp1',
    template: `<h1>{{ custom_text }}</h2>`
})
export class Comp1 {
    custom_text:string;
    constructor(text:string) {
        this.custom_text = text;
    }
}

/*********************************************/

@Component({
    selector: 'comp2',
    directives: [Comp1],
    template: `
    <b>Comp 2</b>
    <comp1></comp1>
    `
})
export class Comp2 {
    constructor() {
        // ...
        // How to send my own text to comp1 from comp2
        // ...
    }
}

是否可以将我自己的文本从 comp1 发送到 comp2？

是否可以从comp2获取comp1实例？

谢谢。

Answer 1

comp2 是 comp1 的父级，所以

• 将数据从 child 发送到 parent (comp1 到 comp2)添加 OutputProperty给 child :
  @Output() someEvent = newEventEmitter();
  和emit()一个事件:this.someEvent.emit('some text');
  父级需要绑定(bind)到输出属性/事件:<comp2 (someEvent)="someHandler()"></comp2>
• 要获取对子组件实例的引用(comp2 获取对 comp1 的引用)，请使用 @ViewChild 或 @Query 在 comp2 中:@ViewChild(Comp1) viewChild:comp1;然后您可以访问 this.comp1在 ngAfterViewInit() ，或组件生命周期的后期。