Angular 6 - 将组件显示为来自组件的模式对话框。ts

Question

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

我的 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'导入{组件，输入}；

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() 方法打开确认模式对话框？我意识到我可以使用一项服务，但是有什么例子吗？

谢谢。

Answer 1

大多数人会将此代码放入父级的提交方法中：

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

注意上面代码中ConfirmationModal的使用。

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

但是，我可以看到您正在尝试寻求更可重用的东西。

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

使用 @ViewChild 可以轻松调用父/子关系中的子方法

文档在这里：https://angular.io/guide/component-interaction#parent-calls-an-viewchild

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