ElementRefを差し込み可能なエラーに注入

Question

InjectableにElementRefを注入する際に問題があります。ここに私のコードは次のとおり

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 "angular2 /コア" から

インポート{コンポーネント}。

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

export class Modal{ 
    constructor(){ 

    } 
} 

これは私は次のエラーを得られます。

No provider for ElementRef! (HomeComponent -> ModalService -> ElementRef)

なぜ？

Answer 1

サービスクラスにElementRefを注入することはできません。コンポーネントまたは指令のみに注入することはできません。 ElementRefはインスタンスを挿入します。.nativeElementは、コンポーネントまたはディレクティブが接続されているDOM要素にポイントしますが、サービスのDOM要素はありません。

ElementRefは、のいずれでもありません。ElementRefとすることはできません。 ElementRefは、ModalコンポーネントがDOMに追加された場所を指定します。

Modalコンポーネントを、コンテンツをモーダルとして表示するサービスを提供するDOMのどこかに追加することをお勧めします。このコンポーネントは、グローバルに共有されるサービスを注入し、イベントを購読します。グローバルサービスを注入した後、モーダルとして示されるそれ自体に渡されたコンポーネントを追加するDynamicComponentLoaderを使用して加入Modalコンポーネントによって受信されるコンポーネントタイプを発するもModalコンポーネントを使用する

他の成分。詳細については

はhttps://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

SO上のいくつかの同様の質問が既にもありますを参照してください。