Angular2 dom.query到ElementRef

Question

是否可以将DOM.query转换为ElementRef。

我有一个应用程序，有...并且有后端服务，服务没有在其构造函数上有ElementRef，可能是应用程序内的深层。我在想我可以查询dom并重用loadIntoLocation功能 this.componentLoader.loadIntoLocation（Notification，Dom.query（'app'），'notification'，...）

有没有办法获取对app组件或根组件的引用？或者有没有办法查询dom并将其转换为ElementRef？

我想使用loadIntoLocation而不是纯dom，因为我觉得它更适合测试。

Answer 1

如果您的根组件被称为AppComponent，我相信您可以使用其他组件的构造函数中的@Host（）appComponent：AppComponent来注入它。然后您可以访问appComponent.location以获取其ElementRef。然后你可以把这个传递给你的服务。这将基本上做什么，它会要求注入AppComponent类型的主机，如果当前的Injector无法找到它，它会尝试使用parentInjector，直到它可以解析依赖关系。无论如何，你想以某种方式将ElementRef传递给你的服务。您可以查看angular2_material的代码以获取灵感：dialog source。

上述解决方案的缺点是您需要知道AppComponent的类型，因此您的服务用户（您定义的组件）将硬连接根组件的类型。这就是为什么我只想使用当前组件的当前ElementRef来完成它，然后您可以使用DomAdapter将其移动到其他位置。 ElementRef是我理解组件对DOM的引用，因此您可以随时随地创建组件，将其加载到当前组件的位置旁边，然后将其移动到DOM中，这样甚至可以是你的页面的主体，它应该在任何地方都可用。他们在angular2_material对话框中的表现方式是使用DomAdapter的appendChild方法。您可以直接从DomAdapter导入DOM：import {DOM} from 'angular2/src/dom/dom_adapter';。这将为您提供一个可以使用的DomAdapter实例。

此外，我们似乎还有一个改进的API可以直接将组件加载到DOM中的特定位置，因此您不再需要任何ElementRef，您只需定义一个id即可在某处并加载它，或直接使用body元素而不必加载它，然后将它附加到特定的地方。