获取根组件ElementRef或ComponentRef angular 2 [英] Get root component ElementRef or ComponentRef angular 2

问题描述

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

I'm building modal service in angular 2. I resolve most of the issues but i have problem placing the modal component in the body element in a nice angular way. I use DynamicComponentLoader.loadNextToLocation function to get the modal component and place it next to the ElementRef that is uset in DynamicComponentLoader.loadNextToLocation function. But when i don't want to place the created modal inside some component i have to manipulate DOM to insert the created modal. My question is can i use the root element in my application in the modal service? I want to achieve this when specific element isn't provided as container for the modal.

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

推荐答案

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

AppComponent需要提供elementRef字段，但该字段将返回ElementRef.

The AppComponent would need to provide the elementRef field that returns the ElementRef though.

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

这篇关于获取根组件ElementRef或ComponentRef angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！