如何在打開的模態組件中訪問`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`？

回答

相關問題