获取对模板中组件的引用

Question

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

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

    callAnotherComponent() {
        anotherComponent.doSomething();
    }

}

显然这不起作用，我的 class 中的另一个组件未定义。但是有什么简单的方法可以做到这一点吗？在我的例子中，AnotherComponent 应该是一个弹出组件，我想简单地调用类似 myPopupCmp.showMessage("message") 的东西。

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

编辑：

@EricMartinez 经过一些研究我已经更新了你的 plnkr，这里有一个 link 到分支：plnkr. The trick is to use @ViewQuery which is used to query directives and dom elements in the View of the Component. I found this in this issue : angular2 github。

现在的问题是 _results 似乎是空的，尽管如果我在控制台中展开视图我可以看到我的组件，我什至可以看到它的属性，所以数据在那里但我不能'访问它。有没有使用 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()，并且它在不导入任何东西的情况下工作正常..看图！

Answer 3

请看这个，似乎与答案中的方法相同，但如果您知道引用的子组件的名称，则无需遍历查询结果。

获取对模板中组件的引用

Getting a reference to a component in the template

typescript

angular