Angular 角度6-从component.ts将组件显示为模态对话框

在从组件执行提交操作后，我试图显示模式确认弹出窗口

my 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();
    }
}

我的组件-modal.html是一个常规的ng引导html模板。 所以，问题是，如何从onSubmit（）方法打开确认模式对话框？我知道我可以使用服务，但有什么例子吗

---

谢谢。

大多数人会将此代码放在家长的提交方法中：

this.modalRef = this.modalService.open(ConfirmationModal, { centered: true, 
    size: 'sm' });

注意上面代码中使用的ConfirmationModal

您还需要将关闭逻辑移到父级

但是，我可以看出，您正在尝试更可重用的东西

您需要做的是从home.component调用open方法

使用@ViewChild调用父/子关系中的子方法很容易

文件如下：

---

然而，我不确定这是一种父母/子女关系，所以我不确定你会取得多大的成功。您可能被迫退回到将代码放在父级的submit方法中。如果您能找到其他方法，请告诉我，我很想听听。

检查此项，谢谢！很好，很高兴能帮上忙！如果你的答案能解决你的问题，那就投票吧，这些都是好的评论。我使用了用户1608841共享的链接。通过使用@Input decorator，我能够使模态具有足够的动态性，可以从我想要的任何组件中使用。