angularjs - 如何在打开的模态组件中访问 `BsModalRef`？

Question

我对 Angular 4 还很陌生。我一直在开发 Angular 1.5.x，现在使用 ngUpgrade 混合方法在 Angular 4 中转换相同的应用程序。我在混合应用程序中使用 ngx-bootstrap 模态组件来替换现有的模态服务。

我在遵循指南 ngx-bootstrap-modal with service 时发现了一些问题.

此语句有问题如果您将组件传递给 .show()，您可以通过注入(inject) BsModalRef 来访问打开的模态

我在这里复制相同的示例，

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

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

我还尝试通过 content 传递 bsModalRef，但它适用于一种模式，而无法适用于嵌套模式。

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

在此处查找完整示例，

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

 }

Answer 1

此问题是由于多个引用或循环引用造成的。

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

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

<强> LIVE DEMO