구성 요소간에 각도 2 모달을 공유합니다.

Question

저는 많은 구성 요소가있는 전형적인 앵귤러 2 응용 프로그램이 있습니다.
이 모달 구성 요소를 설치했습니다 : https://github.com/pleerock/ng2-modal.
더 많은 구성 요소간에 동일한 모달을 공유 할 수있는 방법이 있습니까? 나는 더 잘 설명한다. 다른 구성 요소의 다른 버튼을 클릭 할 때 동일한 모달을 열어야합니다. 가능한가?

나는 방법 https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview 의이 종류를 시도했지만 항상 모달에 내용을 추가하기 때문에 그것은 올바른 방법이 아니다.

내 app.ts 파일 아래에 여기에 게시 :

21/12/2016 갱신
이 @echonax 제안에 따라, 나는 나의 쿵하는 소리를 업데이트 :

//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: '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: 'comp-comp', 
    template: `MyComponent` 
}) 
export class 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<any>; 
    cmpRef:ComponentRef<any>; 

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

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

    close() { 
    if(this.cmp) { 
     this.cmp.destroy(); 
    } 
    this.cmp = 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(CompComponent); 
    } 

} 

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

스테이 튜닝!

Answer 1

plunker의 원래 버전이 실제로 내 질문하는지 : 귄터 @How to dynamically create bootstrap modals as Angular2 components?

난 정말 과소 생각 놀라운 대답을했다가.

plunker 작은 실수를 가지고, 당신은 여기에 고정 된 버전을 찾을 수 있습니다 https://plnkr.co/edit/oMCZIJq58WdLgYf2D0Di?p=preview

사례가 잘못된 필드를 참조하므로 변경하는 경우

if(this.cmp) { 
    this.cmp.destroy(); 
} 

와

if(this.cmpRef) { 
    this.cmpRef.destroy(); 
} 

Answer 2

나는이 화제가 6 달 오래되었다는 것을 알고있다, 그러나 그런 것을 달성하는 저를위한 진짜로 거래이었다.

그래서 공유 데이터와 원격 열기/닫기/이벤트가있는 구성 요소간에 모달 공유가 가능하도록 npm 모듈을 만들었습니다.

부담없이 확인하십시오 : https://github.com/biig-io/ngx-smart-modal.

데모는 여기에 있습니다 : https://biig-io.github.io/ngx-smart-modal/는 각도와 호환

> = 2.0.0