組件之間共享的Angular 2模態

Question

我有一個具有許多組件的典型Angular 2應用程序。
我安裝了這個模態組件： https : //github.com/pleerock/ng2-modal 。
有沒有辦法在更多組件之間共享相同的模態？ 我解釋得更好。 我希望在單擊不同組件內的不同按鈕時可以打開相同的模式。 可能嗎？

我嘗試了這種方法https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview，但這不是正確的方法，因為它總是向模態中添加內容。

我將其發布在我的app.ts文件下面：

2016年12月21日更新
按照@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

這個問題的原始版本實際上是我的問題： 如何動態創建Bootstrap模態作為Angular2組件？

@Günter給出了一個了不起的答案，我認為這確實被低估了。

竊聽器有一個小錯誤，您可以在此處找到固定版本： 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/

與Angular> = 2.0.0兼容