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？

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

感谢。

Answer 1

comp2是comp1的父级，所以

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

Answer 2

是的，很容易实现这一点，

查看教程：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() {
    }
}

尝试一下，让我知道它是怎么回事。

Angular 2 - 获取组件实例

2 个答案: