是否可以将 DOM.query 转换为 ElementRef。
我有一个应用程序，带有 ... 并且有一个后端服务，该服务没有它的构造函数上没有 ElementRef 并且可能是应用程序内部的深层。我在想我可以查询 dom 并重用 loadIntoLocation 功能 this.componentLoader.loadIntoLocation(Notification, Dom.query('app'),'notification',...)
有没有办法获取对应用组件或根组件的引用？或者有没有办法查询dom并将其转换为ElementRef？
我想使用 loadIntoLocation 而不是纯 dom，因为我认为它更适合测试。
【问题讨论】：
标签： angular typescript1.5
如果您的根组件称为 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元素而不必加载它，然后将其附加到特定的地方。
【讨论】：