Angular2 dom.query to ElementRef

Question

Можно ли преобразовать DOM.query в ElementRef.

У меня есть приложение, с ... и у меня есть сервис для бэкэнд, сервис не имеет ElementRef на его конструкторе и может быть слоями в пределах приложения. Я думал, что могу запросить dom и повторно использовать функцию loadIntoLocation. this.componentLoader.loadIntoLocation (Уведомление, Dom.query ('приложение'), 'уведомление', ...)

Есть ли способ получить ссылка на компонент приложения или корневой компонент? Или есть способ запросить dom и преобразовать его в ElementRef?

Я хочу использовать loadIntoLocation вместо чистого dom, потому что я думаю, что это лучше для тестирования.

Answer 1

Если ваш корневой компонент называется AppComponent, я считаю, что вы можете его внедрить с помощью приложения @Host() appComponent: AppComponent в конструкторе вашего другого компонента. И затем вы можете получить доступ к appComponent.location, чтобы получить ElementRef. И тогда вы можете передать это вам на службу. Что это будет делать в основном, он попросит ввести хост типа AppComponent, и если текущий инжектор не сможет его найти, он пытается с parentInjector, пока он не сможет решить проблему. По-моему, вы каким-то образом должны передать ElementRef своим сервисам. Вы можете посмотреть код углового2_материала для вдохновения: dialog source.

Недостатком вышеприведенного решения является то, что вам необходимо знать тип AppComponent, поэтому пользователь вашей службы (определяющий компонент) будет поддерживать тип вашего корневого компонента. Вот почему я предпочел бы сделать это просто с текущим ElementRef вашего текущего компонента, а затем вы можете переместить его в другое место с помощью DomAdapter. ElementRef до такой степени, насколько я понял ссылку вашего компонента на DOM, поэтому вы можете создавать свой компонент везде, где бы вы ни находились, загружать его рядом с местоположением вашего текущего компонента, а затем просто перемещать его в DOM, и это может быть даже тело вашей страницы, которое должно быть доступно в любом месте. Как они это делают в диалоговом окне angular2_material, используется метод appendChild для DomAdapter. И вы можете просто импортировать DOM из DomAdapter: import {DOM} from 'angular2/src/dom/dom_adapter';. Это даст вам пример DomAdapter для работы.

Также кажется, что в будущем у нас будет улучшенный API для непосредственной загрузки компонента в определенное место в DOM, так что вам больше не понадобится ElementRef, и вы могли бы просто определить id где-нибудь и загрузить это там, или использовать элемент тела непосредственно, не загружая его, а затем присоединить его к определенному месту.