如何在打开的模态组件中访问`BsModalRef`?

本文介绍了如何在打开的模态组件中访问`BsModalRef`?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I'm quite new to Angular 4.I have been working on Angular 1.5.x and now converting same application in Angular 4 with ngUpgrade hybrid approach. I'm using ngx-bootstrap modal component in my hybrid application in order to replace existing modal service.

我在以下指南 ngx-bootstrap-modal与服务.

此语句If you passed a component to .show() you can get access to opened modal by injecting BsModalRef

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

I'm copying same example here,

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

我尝试运行此示例，但是在打开的模式中我从未得到bsModalRef.

I try running this example, but I never get bsModalRef in opened modal.

我也尝试通过content传递bsModalRef，但是它只能用于一种模式，而不能用于嵌套模式.

I also try passing bsModalRef through content, but it work with one modal and failed to work with nested modal.

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

Is there any other way to pass bsModalRef in ModalContentComponent ?

在此处找到完整的示例，

Find complete example 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 }

推荐答案

通过使用

从'ngx-bootstrap'导入{BsModalRef};

import { BsModalRef } from 'ngx-bootstrap';

感谢GitHub上的ngx-bootstap社区-问题解决方案

Thanks to ngx-bootstap community on GitHub - Problem solution