Angular 组件之间共享的角度2模态

我有一个典型的Angular 2应用程序，包含许多组件。 我安装了此模式组件：。 有没有办法在更多的组件之间共享相同的模态？ 我解释得更好。我想相同的模式应该打开不同的组件内的不同按钮点击。可能吗

我试过这种方法 但这不是正确的方式，因为它总是在模态中添加内容

我将其发布在我的app.ts文件下面：

2016年12月21日更新 根据@echonax的建议，我更新了我的plunk：

//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{}

---

请继续收看

普朗克的原始版本实际上是我的问题：

@甘特给出了一个令人惊讶的答案，我认为这个答案被低估了

plunker有一个小错误，您可以在此处找到修复版本：

如果案例引用了错误的字段，则进行更改

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

与

---

普朗克的原始版本实际上是我的问题：

@甘特给出了一个令人惊讶的答案，我认为这个答案被低估了

plunker有一个小错误，您可以在此处找到修复版本：

如果案例引用了错误的字段，则进行更改

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

与

---

我知道这个话题已经讨论了6个月了，但对我来说实现这样一个目标真的是一笔交易

因此，我制作了一个npm模块，允许在具有共享数据和远程打开/关闭/事件的组件之间进行模式共享

请随意查看：

演示如下：

---

与Angular>=2.0.0兼容我知道这个主题已经有6个月了，但实现这样的目标对我来说真是一笔交易

因此，我制作了一个npm模块，允许在具有共享数据和远程打开/关闭/事件的组件之间进行模式共享

请随意查看：

演示如下：

---

与Angular>=2.0.0兼容

您尝试过什么？尝试引用它，并发布不起作用的代码，以获取帮助。当你尝试了某件事，只是需要修复时，人们会给予更多的帮助，而不是让别人帮你做。好吧，我做了。无论如何，我尝试的任何方法都符合我的需要，所以我认为发布它们都没有用。昨天下午我试了整个下午，这不是懒惰。事实上，普朗克的原始版本是我的问题：@Günter给出了一个惊人的答案，我认为这个答案被低估了。它有一个小错误，我会告诉甘特，但你可以在这里找到固定版本：@echonax非常感谢！我尝试在我的代码中实现它，我会让你知道的。好吧，这是因为服务共享服务必须这样编写：showModal:Subject=newsubject；你试过什么？尝试引用它，并发布不起作用的代码，以获取帮助。当你尝试了某件事，只是需要修复时，人们会给予更多的帮助，而不是让别人帮你做。好吧，我做了。无论如何，我尝试的任何方法都符合我的需要，所以我认为发布它们都没有用。昨天下午我试了整个下午，这不是懒惰。事实上，普朗克的原始版本是我的问题：@Günter给出了一个惊人的答案，我认为这个答案被低估了。它有一个小错误，我会告诉甘特，但你可以在这里找到固定版本：@echonax非常感谢！我尝试在我的代码中实现它，我会让你知道的。好吧，这是因为服务共享服务必须这样编写：showModal:Subject=newsubject；非常感谢你！我将尝试在我的以下脚本中使用它。很高兴！请随意创建一些问题来帮助我改进它；更新：我更新了组件以修复AOT构建时的问题。我还编辑了回购协议的链接，因为它会移动；非常感谢你！我将尝试在我的以下脚本中使用它。很高兴！请随意创建一些问题来帮助我改进它；更新：我更新了组件以修复AOT构建时的问题。我还编辑了回购协议的链接，因为它会移动；