Angularjs 如何在打开的模态组件中访问“BsModalRef”？

我是Angular 4的新手。我一直致力于Angular 1.5.x，现在使用

ngUpgrade

混合方法在Angular 4中转换相同的应用程序。 我在混合应用程序中使用了

ngx bootstrap

modal组件来替换现有的modal服务

我在下面的指南中发现了一些问题

此语句有问题

如果将组件传递给.show（），则可以通过注入BsModalRef来访问打开的模式

我在这里复制同样的例子

export class ModalContentComponent {
  public title: string;
  public list: any[] = [];
  constructor(public bsModalRef: BsModalRef) {}  // How do you get bsModalRef here
}

import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';

@Component({
 selector: 'demo-modal-service-component',
 templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
 bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}

public openModalWithComponent() {
let list = ['Open a modal with component', 'Pass your data', 'Do something else', '...'];
this.bsModalRef = this.modalService.show(ModalContentComponent);
this.bsModalRef.content.title = 'Modal with component';
this.bsModalRef.content.list = list;
setTimeout(() => {
  list.push('PROFIT!!!');
}, 2000);
}
}

/* This is a component which we pass in modal*/

@Component({
 selector: 'modal-content',
 template: `
<div class="modal-header">
  <h4 class="modal-title pull-left">{{title}}</h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <ul *ngIf="list.length">
    <li *ngFor="let item of list">{{item}}</li>
  </ul>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
</div>
 `
})
 export class ModalContentComponent {
  public title: string;
  public list: any[] = [];
  constructor(public bsModalRef: BsModalRef) {} // How do you get bsModalRef here

 }

我尝试运行这个示例，但从未在打开的模式中获得
bsModalRef

我还尝试通过
content
传递
bsModalRef
，但它只能使用一种模式，不能使用嵌套模式

在
ModalContentComponent
中传递
bsModalRef
还有其他方法吗

在这里找到完整的示例

export class ModalContentComponent {
  public title: string;
  public list: any[] = [];
  constructor(public bsModalRef: BsModalRef) {}  // How do you get bsModalRef here
}

import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';

@Component({
 selector: 'demo-modal-service-component',
 templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
 bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}

public openModalWithComponent() {
let list = ['Open a modal with component', 'Pass your data', 'Do something else', '...'];
this.bsModalRef = this.modalService.show(ModalContentComponent);
this.bsModalRef.content.title = 'Modal with component';
this.bsModalRef.content.list = list;
setTimeout(() => {
  list.push('PROFIT!!!');
}, 2000);
}
}

/* This is a component which we pass in modal*/

@Component({
 selector: 'modal-content',
 template: `
<div class="modal-header">
  <h4 class="modal-title pull-left">{{title}}</h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <ul *ngIf="list.length">
    <li *ngFor="let item of list">{{item}}</li>
  </ul>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
</div>
 `
})
 export class ModalContentComponent {
  public title: string;
  public list: any[] = [];
  constructor(public bsModalRef: BsModalRef) {} // How do you get bsModalRef here

 }

从'@angular/core'导入{Component}；
从“ngx引导/模式”导入{BsModalService}；
从“ngx bootstrap/modal/modal options.class”导入{BsModalRef}；
@组成部分({
选择器：“演示模式服务组件”，
templateUrl:“./service component.html”
})
导出类DemoModalServiceFromComponent{
bsModalRef:bsModalRef；
构造函数（私有modalService:BsModalService）{}
公共OpenModelWithComponent（）{
let list=[“使用组件打开模式”、“传递数据”、“执行其他操作”、“执行其他操作”…]；
this.bsModalRef=this.modalService.show（ModalContentComponent）；
this.bsModalRef.content.title='Modal with component'；
this.bsModalRef.content.list=列表；
设置超时（（）=>{
list.push（'PROFIT！！！'）；
}, 2000);
}
}
/*这是我们在模态中传递的一个组件*/
@组成部分({
选择器：'模式内容'，
模板：`
{{title}}
&时代；

{{item}

接近
`
})
导出类ModalContentComponent{
公共标题：字符串；
公开列表：任意[]=[]；
构造函数（publicbsmodalref:bsModalRef）{}//如何在这里获得bsModalRef
}
通过使用

从“ngx引导”导入{BsModalRef}

多亏了GitHub上的ngx bootstap

社区-

，这个问题是因为有多个引用或循环引用

您应该直接从ngx引导导入所有ngx引导组件和服务，而不是转到特定文件

import { BsModalRef,ModalModule ,BsModalService } from 'ngx-bootstrap';

通过导入解决

import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

---

在调用

modalService.show（）的地方显示完整代码，最好创建一个plunker@Maximus添加了完整的代码好的，您希望
BsModalRef
应该参考什么组件？你能设置一个简单的插件吗？
ModalContentComponent
expect
BsModalRef
好的，需要一个插件