Angular2 dom.query到ElementRef [英] Angular2 dom.query to ElementRef

问题描述

是否有可能在DOM.query转换为ElementRef。

Is it possible to convert the DOM.query to ElementRef.

我有一个应用程序，以...并有后端服务，可是没有没有ElementRef其构造和可能的应用深处是层的服务。我想，我可以查询DOM和重用loadIntoLocation功能
this.componentLoader.loadIntoLocation（通知，Dom.query（应用），通知，...）

I have an application, with ... and have a service to the backend, the service doesnt have does not have ElementRef on its constructor and might be layers deep within the app. I was thinking that i could query the dom and reuse the loadIntoLocation feature this.componentLoader.loadIntoLocation(Notification, Dom.query('app'),'notification',...)

有没有一种方法来获取参考应用程序组件或根组件？还是有方法来查询DOM并把它转换为ElementRef？

Is there a way to get the reference to the app component or the root component? Or is there a way to query the dom and convert it to ElementRef?

我想用loadIntoLocation，而不是纯粹的DOM，因为我认为它进行测试越好。

I want to use loadIntoLocation instead of pure dom because i think its better for testing.

推荐答案

如果您的根组件被称为AppComponent，我相信你可以使用@host（）appComponent注入它：在你的其他部件的构造AppComponent。然后你就可以访问appComponent.location得到它ElementRef。然后你就可以通过这一个为你服务。什么这将基本上做到，它会要求注入型AppComponent的主机，如果当前的喷油器是不是能找到它，它与parentInjector尝试，直到它能够解决的依赖。以任何方式你会莫名其妙地需要一个ElementRef传递给您的服务，我想。你可以看一下的angular2_material的code的启示：<一href=\"https://github.com/angular/angular/blob/master/modules/angular2_material/src/components/dialog/dialog.ts\"相对=nofollow>对话框源。

If your root component is called AppComponent, I believe you could inject it using @Host() appComponent : AppComponent in the constructor of your other component. And then you can access appComponent.location to get its ElementRef. And then you can pass this one to your service. What this will do basically, it will ask to inject the host of type AppComponent, and if the current Injector is not able to find it, it tries with the parentInjector until it can resolve the dependency. In any way you somehow need to pass an ElementRef to your service I think. You can look at the code of angular2_material for inspiration : dialog source.

上述解决方案的缺点是，你需要知道AppComponent的类型，所以你的服务（你定义组件）的用户，将硬线根组件的类型。这就是为什么我宁愿与您当前组件的当前ElementRef做简单的说，然后你就可以将它别的地方用<一个href=\"https://github.com/angular/angular/blob/448ca384ccf6268a95f534f06ec58b673ac762a0/modules/angular2/src/dom/dom_adapter.ts\"相对=nofollow> DomAdapter 。该ElementRef是，据我了解你的组件对DOM的引用，所以无论你在哪里，你可以创建你的组件，接下来将其加载到当前组件的位置，然后只需在DOM移动它，这甚至可能是您的网页，这应该是可在任何地方的机构。他们似乎这样做angular2_material的对话框中的方法是使用DomAdapter的appendChild方法。你可以简单地从DomAdapter导入它得到DOM：进口从'angular2 / src目录/ DOM / dom_adapter'{} DOM; 。这会给你DomAdapter实例的工作。

The downside of the solution above is that you need to know the type of AppComponent, so the user of your service ( the component you define ), will hardwire the type of your root component. That's why I'd rather do it simply with the current ElementRef of your current component, and then you can move it some place else with DomAdapter. The ElementRef is as far as I understood the reference of your component to the DOM, so you can create your component wherever you are, load it next to your current component's location and then just move it in the DOM, and this could even be the body of your page, which should be available anywhere. The way they seem to do this in the dialog of angular2_material is by using the appendChild method of DomAdapter. And you can simply get DOM from importing it from DomAdapter : import {DOM} from 'angular2/src/dom/dom_adapter';. This will give you an instance of DomAdapter to work with.

此外，它似乎在未来我们将有一个更好的API组件直接加载到DOM中的一个特定的地方，所以你不需要任何ElementRef了，你可以只定义一个ID的地方，并加载它那里，或者直接使用身体元件，而无需加载它，然后将其附加到特定的地方。

Also it seems that in the future we'll have an improved API to directly load a component into a specific place in the DOM, so you won't need any ElementRef anymore and you could just define an id somewhere and load it there, or use the body element directly without having to load it, and then append it to a specific place.

这篇关于Angular2 dom.query到ElementRef的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！