角度2つの通過データ動的モーダル

Question

に私はこの例を使用する： How to dynamically create bootstrap modals as Angular2 components?
複数のコンポーネント間で共有異なるまたは同一のモーダルの動的生成と自分plunkを開発します。
残念ながら、親コンポーネントからモーダルにデータを渡す方法がわからないため、いくつかの問題があります。 私の塊（https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview）では、渡すデータを「dataToPass」と呼びます。 アイデア私app.ts以下ここで

：

//our root app component 
import { 
    NgModule, 
    ComponentRef, 
    Injectable, 
    Component, 
    Injector, 
    ViewContainerRef, 
    ViewChild, ComponentFactoryResolver} from "@angular/core"; 
import {BrowserModule} from '@angular/platform-browser' 
import {Subject} from 'rxjs/Subject'; 

@Injectable() 
export class SharedService { 
    showModal:Subject<any> = new Subject(); 
} 

@Component({ 
    selector: 'comp-comp', 
    template: `MyComponent` 
}) 
export class CompComponent { } 

@Component({ 
    selector: 'child-component', 
    template: ` 
     <button (click)="showDialog()">show modal from child</button> 
    `, 
}) 
export class ChildComponent { 
    constructor(private sharedService:SharedService) {} 

    showDialog() { 
    this.sharedService.showModal.next(CompComponent); 
    } 

} 

@Component({ 
    selector: 'modal-comp', 
    template: ` 
    <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel"> 
    <div class="modal-dialog largeWidth" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title" id="theModalLabel">The Label</h4></div> 
     <div class="modal-body" #theBody> 
     </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()">Close</button> 
    </div></div></div></div> 
` 
}) 
export class ModalComponent { 
    @ViewChild('theBody', {read: ViewContainerRef}) theBody; 

    cmp:ComponentRef; 

    constructor(
    sharedService:SharedService, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    injector: Injector) { 

    sharedService.showModal.subscribe(type => { 
     if(this.cmpRef) { 
     this.cmpRef.destroy(); 
     } 
     let factory = this.componentFactoryResolver.resolveComponentFactory(type); 
     this.cmpRef = this.theBody.createComponent(factory); 
     $('#theModal').modal('show'); 
    }); 
    } 

    close() { 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    } 
    this.cmpRef = null; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello</h2> 
     <button (click)="showDialog()">show modal</button> 
     <child-component></child-component> 
    </div> 
    `, 
}) 
export class App { 

    private dataToPass: string; 
    constructor(private sharedService:SharedService) { 
    this.dataToPass = 'data to pass'; 
    } 

    showDialog() { 
    this.sharedService.showModal.next(CompComponent); 
    } 

} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, ModalComponent, CompComponent, ChildComponent], 
    providers: [SharedService], 
    entryComponents: [CompComponent], 
    bootstrap: [ App, ModalComponent ] 
}) 
export class AppModule{} 

事前にどうもありがとう。

Answer 1

誰かが興味があれば、解決策を見つけることができました。

I被験体がその加入者に値を放出するために使用することができるように、私は、next関数のパラメータとして必要なデータを渡す：

showDialog() { 
    this.sharedService.showModal.next({'type': CompComponent, 'title': 'titolo1', 'dataToPass': 'dataToPass'}); 
    } 

そして私はこの次の例（CompComponentsubscribe内部関数へデータを渡します。 Angular 2 Passing data to component when dynamically adding the component）、この方法：ここでは全体のコードの下

let factory = this.componentFactoryResolver.resolveComponentFactory(data.type); 
    this.cmpRef = this.theBody.createComponent(factory); 
    this.cmpRef.instance.dataToPass = data.dataToPass; 

、あなたはそれはあまりにも、plunkerにhereを見ることができます。

//our root app component 
import { 
    NgModule, 
    ComponentRef, 
    Injectable, 
    Component, 
    Injector, 
    ViewContainerRef, 
    ViewChild, ComponentFactoryResolver} from "@angular/core"; 
import {BrowserModule} from '@angular/platform-browser' 
import {Subject} from 'rxjs/Subject'; 

@Injectable() 
export class SharedService { 
    showModal:Subject<any> = new Subject(); 
} 

@Component({ 
    selector: 'comp-comp', 
    template: `MyComponent {{dataToPass}}` 
}) 
export class CompComponent { } 

@Component({ 
    selector: 'child-component', 
    template: ` 
     <button (click)="showDialog()">show modal from child</button> 
    `, 
}) 
export class ChildComponent { 
    constructor(private sharedService:SharedService) {} 

    showDialog() { 
    this.sharedService.showModal.next({'type': CompComponent, 'title': 'titolo2', 'dataToPass': 'dataToPass'}); 
    } 

} 

@Component({ 
    selector: 'modal-comp', 
    template: ` 
    <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel"> 
    <div class="modal-dialog largeWidth" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <h4 class="modal-title">{{theHeader}}</h4></div> 
     <div class="modal-body" #theBody> 
     </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()">Close</button> 
    </div></div></div></div> 
` 
}) 
export class ModalComponent { 
    @ViewChild('theBody', {read: ViewContainerRef}) theBody; 

    theHeader: string = ''; 
    cmpRefBody:ComponentRef<any>; 

    constructor(
    sharedService:SharedService, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    injector: Injector) { 

    sharedService.showModal.subscribe(data => { 
     if(this.cmpRef) { 
     this.cmpRef.destroy(); 
     } 
     let factory = this.componentFactoryResolver.resolveComponentFactory(data.type); 
     this.cmpRef = this.theBody.createComponent(factory); 
     this.cmpRef.instance.dataToPass = data.dataToPass; 
     this.theHeader = data.title; 
     console.log(data.title); 
     console.log(data.dataToPass); 
     $('#theModal').modal('show'); 
    }); 
    } 

    close() { 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    } 
    this.cmpRef = null; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello</h2> 
     <button (click)="showDialog()">show modal</button> 
     <child-component></child-component> 
    </div> 
    `, 
}) 
export class App { 

    constructor(private sharedService:SharedService) {} 

    showDialog() { 
    this.sharedService.showModal.next({'type': CompComponent, 'title': 'titolo1', 'dataToPass': 'dataToPass'}); 
    } 

} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, ModalComponent, CompComponent, ChildComponent], 
    providers: [SharedService], 
    entryComponents: [CompComponent], 
    bootstrap: [ App, ModalComponent ] 
}) 
export class AppModule{}