作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经创建了一个调用我的不同模式的服务。所以我有一个模态调用“Confirm Modal”,它可以接受 3 个参数:一个确认函数、一个拒绝函数和一个主体。这是以下模式:
export class ConfirmModalComponent implements OnInit {
@Output() acceptFunc;
@Output() refuseFunc?;
@Input() body: string;
constructor(public activeModal: NgbActiveModal) {}
ngOnInit() {}
async confirmModal() {
await this.acceptFunc;
this.closeModal();
}
async refuseModal() {
if (this.refuseFunc) await this.refuseFunc();
this.closeModal();
}
closeModal() {
this.activeModal.close('Modal Closed');
}
}
在我的模态服务中,我创建以下函数来打开此模态
openConfirmModal(accept: <P = any>(props?: P) => void, body: string, refuse?: <P = any>(props?: P) => void): NgbModalRef {
const modalRef = this.modalService.open(ConfirmModalComponent, { size: 'lg' });
modalRef.componentInstance.accept = accept;
if (refuse) modalRef.componentInstance.refuse = refuse;
modalRef.componentInstance.body = body;
return modalRef;
}
`
我按如下方式调用此函数:
openConfirmModal() {
this.modalService.openConfirmModal(this.myFunc.bind(this), 'Test')
}
myFunc() {
console.log('Work !');
}
问题是我的函数 myFunc 从未被调用,那么如何通过服务将函数从组件传递到我的模态?
最佳答案
在您的ConfirmModalComponent上,您没有调用带括号的方法,请更改
async confirmModal() {
await this.acceptFunc;
this.closeModal();
}
至
async confirmModal() {
await this.acceptFunc();
this.closeModal();
}
在 openConfirmModal 方法中,您定义的函数名称与您在组件上使用的函数名称不同,请更改这两行
modalRef.componentInstance.accept = accept;
if (refuse) modalRef.componentInstance.refuse = refuse;
至
modalRef.componentInstance.acceptFunc = accept;
if (refuse) modalRef.componentInstance.refuseFunc = refuse;
关于javascript - [ng-bootstrap] : Passing function to a modal threw a service,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53190381/
我是一名优秀的程序员,十分优秀!