我尝试从我的组件执行提交操作后显示模态确认弹出窗口 .
我的home.component.ts中的onSubmit()方法:
onSubmit() {
var response = new Response(1, this.name, this.phone, this.email,
this.optIn, this.responses);
this.questionsService.saveResponse(response).subscribe(
data => response = data)
// show popup confirmation dialog here
this.ngOnInit();
}
我的确认模态组件:从'@ angular / core'导入{Component,Input};
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'confirmation-modal',
templateUrl: './confirmation-modal.html'
})
export class ConfirmationModal {
modalRef;
constructor(private modalService: NgbModal) {
}
open(content) {
this.modalRef = this.modalService.open(content, { centered: true,
size: 'sm' });
}
onClose() {
this.modalRef.close();
}
}
我的component-modal.html是一个常规的ng-bootstrap HTML模板 . 那么,问题是,如何从onSubmit()方法打开确认模式对话框?我意识到我可以使用服务,但任何例子?
谢谢 .
1 回答
大多数人会将此代码放在父提交方法中:
请注意在上面的代码中使用ConfirmationModal .
您还需要将关闭逻辑移动到父级 .
但是,我可以看到你正试图寻找更可重用的东西 .
你需要做的是从你的home.component调用open方法
使用@ViewChild可以轻松地在父/子关系中调用子方法
文件在这里:https://angular.io/guide/component-interaction#parent-calls-an-viewchild
但是,我不确定这是父母/子女的关系,所以我不确定你会有多少成功 . 您可能会被迫回退到将代码放在父提交方法中 . 让我知道如果你找到另一种方式,我会很有兴趣听到 .