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

是的，很容易做到，

查看教程：MULTIPLE COMPONENTS Angular2 教程的第 3 部分，了解如何发送输入。

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

 // ngOnChange to make sure the component is in sync with inputs changes in parent
 ngOnChanges() {
       this.customText= text;
    }
}

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

@Component({
    selector: 'comp2',
    directives: [Comp1],
    template: `
    <b>Comp 2</b>
    <comp1 customText = "My Custom Test"></comp1>
    `
})
export class Comp2 {
    constructor() {
    }
}

试一试，让我知道结果如何。

Answer 2

comp2 是 comp1 的 parent，所以

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

Angular 2 - 获取组件实例

Angular 2 - Get component instance

typescript

angular2-template

angular