Внедрение ElementRef в необратимую ошибку

Question

У меня проблема с инъекцией ElementRef к моему Injectable, Вот мой код:

import {Injectable, DynamicComponentLoader, ElementRef, Inject} from "angular2/core";
import {Modal} from './Modal';

@Injectable()
export class ModalService{
    constructor(public _dcl:DynamicComponentLoader, public _el:ElementRef){

    }

    createModal(parent){
        this._dcl.loadIntoLocation(Modal,this._el, 'modal')
    }


}

мой Modal:

import {Component} из "angular2/core";

@Component({
    selector: 'modal',
    templateUrl: 'app/common/modal/Modal.html'
})

export class Modal{
    constructor(){

    }
}

Это приводит меня к следующей ошибке:

Нет поставщика для ElementRef! (HomeComponent -> ModalService -> ElementRef)

Зачем?

Answer 1

Вы не можете вводить ElementRef к классу обслуживания, только к компоненту или директиве. ElementRef внедряет случай, когда .nativeElement указывает на элемент DOM, к которому присоединен компонент или директива, но для службы нет элемента DOM.

В вашем примере ElementRef не может быть любым ElementRef, ElementRef определяет где ты Modal компонент добавляется в DOM.

Я предлагаю вам добавить один сингл Modal компонент где-то в DOM, который предоставляет сервис отображения контента в качестве модального. Этот компонент внедряет глобально общий сервис и подписывается на события.

Другие компоненты, которые хотят использовать Modal компонент также внедряет глобальную услугу и испускает тип компонента, который должен быть получен подписавшимся Modal компонент, который затем использует DynamicComponentLoader добавить переданный компонент к себе, чтобы он отображался как модальный.

Для получения дополнительной информации см. https://angular.io/docs/ts/latest/cookbook/component-communication.html.

На SO уже есть несколько похожих вопросов.

Answer 2

Вы можете вводитьElementRefв сервисе, если этот сервис предоставляется компонентом.

Компонент:

      @Component({
    selector: 'app-rack-view',
    providers: [ MyService ],
})
export class MyComponent {}

Обслуживание:

      @Injectable() 
export class MyService {
    constructor(private elementRef: ElementRef<HTMLDivElement>) {} // OK 
}