typescript - 获取根组件 ElementRef 或 ComponentRef angular 2

Question

我正在以 Angular 2 构建模态服务。我解决了大部分问题，但我无法以良好的 Angular 方式将模态组件放置在 body 元素中。我使用 DynamicComponentLoader.loadNextToLocation 函数获取模态组件并将其放置在 DynamicComponentLoader.loadNextToLocation 函数中使用的 ElementRef 旁边。但是当我不想将创建的模态放置在某个组件中时，我必须操纵 DOM 来插入创建的模态。我的问题是我可以在模态服务的应用程序中使用根元素吗？当特定元素未作为模态容器提供时，我想实现此目的。

var elementRef = DOM.query('app');
this.componentLoader.loadNextToLocation(ModalBackdrop, elementRef, backdropBindings)

Answer 1

要获得对根组件的引用，您可以注入(inject) ApplicationRef :

constructor(private app:ApplicationRef)
{
      let element: ElementRef = this.app['_rootComponents'][0].location;
}