Question

我想从模板中定义的组件中获取引用。让我们考虑一下我有以下内容：

@Component({
    selector: 'a-component'
})
@View({
    template: '<another-component #anotherComponent></another-component>',
    directives: [AnotherComponent]
})
class AComponent {

    callAnotherComponent() {
        anotherComponent.doSomething();
    }

}

显然这不起作用，我的班级中的另一个组件没有定义。但有没有简单的方法呢？在我的情况下，AnotherComponent应该是一个弹出组件，我想简单地调用类似myPopupCmp.showMessage（＆＃34; message＆＃34;）。

我当然可以使用数据绑定并在我的模板中使用它<another-component [text]="popupText" [visible]="isPopupVisible"></another-component>，并使用这两个成员通过首先设置文本然后使其可见来显示它。在大多数情况下，数据绑定是有意义的，但在这里我想封装属性，避免必须处理弹出窗口的行为。

编辑：

@EricMartinez我经过一些研究后更新了你的plnkr，这里是fork的链接：plnkr。诀窍是使用@ViewQuery，它用于查询组件视图中的指令和dom元素。我在这个问题中找到了这个：angular2 github。

现在的问题是_results似乎是空的，即使我可以看到我的组件，如果我在控制台中扩展视图，我甚至可以看到它的属性，所以数据是以某种方式，但我可以＆＃39;访问它。有没有使用QueryLists的特殊方法？使用_results似乎不是很干净，因为_表示它应该是私有的或内部的。我也尝试先使用它，但它总是带来一个空引用。

Answer 1

从https://github.com/angular/angular/commit/b0e2ebda708cf25287a211a30ef63d84cdb92a7f开始，您应该可以：

class AComponent {
    constructor(@Query('#anotherComponent') query:QueryList<AnotherComponent>) {

    }
}

Answer 2

所以，总而言之，我不得不使用装饰器@ViewQuery：

class AComponent {

    private _anotherComponentQuery : QueryList<AnotherComponent>;

    constructor(@ViewQuery('anotherComponent') query : QueryList<AnotherComponent>) {
    this._anotherComponentQuery = query;
}

    onInit() {
        for(component of this._anotherComponentQuery){
            //component.instance.callMethod()
        }
    }

}

这里需要注意的两件重要事情是，ViewQuery返回的组件是ComponentRef，因为在我的模板中它是一个组件。否则它将是一个ElementRef我相信简单的HTML标签。另一件事是在我的组件的构造函数中，查询是空的，因为我认为在此阶段尚未解析模板。而QueryList是动态的，每当我的视图发生变化时都会更新（比方说我添加了满足查询的元素）。因此，技巧要么是稍后才访问查询，例如在事件处理程序中，要么在onInit中执行，而onInit是组件生命周期的一部分。奇怪的是，如果我要定义生命周期onInit并导入onInit，代码将永远不会通过我的方法onInit（），并且它没有导入任何东西它工作正常..去图！

Answer 3

请参阅此Execute method on child component，如果您知道引用的子组件的名称，则看起来与回答中的方法相同，但不会遍历查询结果。

获取模板

3 个答案: