获取根组件ElementRef或ComponentRef angular 2

Question

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

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

Answer 1

要获取对根组件的引用,可以注入ApplicationRef:

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

Answer 2

appElementRef: ElementRef;
constructor(private applicationRef:ApplicationRef, injector: Injector) {
  this.appElementRef = injector.get(applicationRef.componentTypes[0]).elementRef;
}

在AppComponent需要提供elementRef返回现场ElementRef,虽然.

另见https://github.com/angular/angular/issues/6446