Angular2：サービスからDynamicComponentLoaderを使用する

Question

使用例：トースト通知サービスToastServiceを作成しています。私は新しいトーストを作るためにこのサービスをコンポーネントに注入したいと思っています。

私は、単一の通知表しToastコンポーネント作成しました：

@Component({ 
    selector: 'toast', 
    template: `<div>This is a notification</div>` 
}) 
export class Toast {} 

そして、私は私のコンポーネントの1からトーストを表示するtoastService.show(myMessage);を呼び出すことができるようにしたいです。

これまでのところ、私のToastServiceは次のようになります。

@Injectable() 
export class ToastService{ 

    constructor(private loader: DynamicComponentLoader) {} 

    show(message: string) { 
     this.loader.loadNextToLocation(
      Toast, 
      /* location: ElementRef - how do I get one? I want to load it into the body */ 
     ) 
     .then((ref: ComponentRef) => { 
      console.log('loaded toast!'); 
     }); 
    } 
} 

私は理想的には、アプリケーションの残りの要素の上に常にあることを確認するために、body要素の子としてトーストをロードしたいと思います。

これはどのように可能ですか？それとも良い方法がありますか？私は彼らがangular2 material repoでそれをやる方法を見つけ出そうとしましたが、理解するのは難しいです。

Answer 1

ルック：あなたがブートストラップ前に、共有サービスインスタンスを作成して、のような「アプリケーション」の両方に同じインスタンスを提供する必要があります。この場合

。モーダルの要件はモーダルダイアログと似ています。

具体的にはmodal.tsファイルをチェックし、どのようにダイアログを表示するにはopenメソッドはルートコンポーネントを保持します。

public open(componentType: FunctionConstructor, bindings: ResolvedProvider[], 
       config?: ModalConfig): Promise<ModalDialogInstance> { 
     // TODO: appRef.injector.get(APP_COMPONENT) Doesn't work. 
     // When it does replace with the hack below. 
     //let myElementRef = this.appRef.injector.get(APP_COMPONENT).location; 
     let elementRef: ElementRef = (<any>this.appRef)._rootComponents[0].location; 

     return this.openInside(componentType, elementRef, null, bindings, config); 
    } 

appRef

costructorに注入ApplicationRefクラスであり、実行中のアプリケーションへの参照を格納します。

constructor(private componentLoader: DynamicComponentLoader, private appRef: ApplicationRef, 
       @Optional() defaultConfig: ModalConfig) { 

Answer 2

私はサービスにElementRefを取得しようとしません。 ElementRefが使用しようとしてもまだ有効であるかどうかは分かりません。

代わりに私がToastServiceにObservableから更新するために待機し、それをイベントとしてObservableから渡されるコンポーネントが表示されToastコンポーネント「どこか」を追加します。

ToastコンポーネントをAppComponentの外側に追加する場合は、別の角度アプリケーションとしてブートストラップできます。 angular-modalプロジェクトで

let toastService = new ToastService(); 
bootstrap(AppComponent, [provide(ToastService, {useValue: toastService})]); 
bootstrap(Toast, [provide(ToastService, {useValue: toastService})]);