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

我对Angular4相当陌生。我一直致力于Angular 1.5.x的开发，现在将角度4中的相同应用程序转换为ngUpgrade混合方法。我在我的混合应用程序中使用ngx-bootstrap模态组件来取代现有的模态服务。如何在打开的模态组件中访问`BsModalRef`？

我在下面的指南ngx-bootstrap-modal with service中发现了一些问题。

有问题，这种说法If you passed a component to .show() you can get access to opened modal by injecting BsModalRef

我这里复制同样的例子，

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

我尝试运行这个例子，但在开模我从来没有得到bsModalRef。

我也尝试通过bsModalRef到content，但它使用一种模式，并且无法与嵌套模式一起使用。

有没有其他方法可以通过bsModalRef在ModalContentComponent？

在这里找到完整的例子，

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 

}

来源

2017-08-03 Abhijit Muke

显示完整的代码，在那里你调用'modalService.show（）'或更好的创建plunker –

@Maximus添加了完整的代码 –

好吧，你能指望'BsModalRef什么成分'应该指什么？你可以设置一个简单的笨蛋吗？ –

使用

进口{} BsModalRef从 'NGX-引导' 解决;

感谢ngx-bootstap社区GitHub上 - Problem solution

来源

2017-08-05 03:31:44

这个问题是因为多次引用或循环引用。

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

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

LIVE DEMO

来源

2017-08-05 03:48:47 Aravind

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

回答

相关问题