这就是我使用 ng2-bootstrap 模态的方式:
import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'add-customer-modal',
template: `
<template #test let-c="close" let-d="dismiss">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
</div>
</template>
<button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button>
`
})
export class AddCustomerModal {
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content, { size: 'lg' }).result.then((result) => {
console.log(result);
}, (reason) => {
console.log(reason);
});
}
}
我有点困惑,因为我认为内容是用来将参数传递给模态的。但在我看来,打开方法只需要名称即可找到正确的模板?
那么如何传递参数呢?
最佳答案
任何仍在绊倒这个的人可能会发现这很方便,您需要做的就是在您的 ModalComponent 中声明一个字段,如下所示:
modalHeader: string;
advertiser: Advertiser;
您可以在打开模式时通过执行以下操作来设置这些字段。
advertiserModalShow() {
const activeModal = this.modalService.open(AdvertiserModal, { size: 'lg' });
activeModal.componentInstance.modalHeader = 'Advertiser';
activeModal.componentInstance.advertiser = this.selectedAdvertiser;
}
在您的模板中,您可以像这样访问它们:
value={{advertiser.code}}
希望这对您有所帮助。
关于angular - 如何将参数传递给模态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41139842/