Angular 6 - 显示组件作为component.ts的模态对话框

我尝试从我的组件执行提交操作后显示模态确认弹出窗口 .

我的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)

2 years ago

大多数人会将此代码放在父提交方法中:

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

但是,我不确定这是父母/子女的关系,所以我不确定你会有多少成功 . 您可能会被迫回退到将代码放在父提交方法中 . 让我知道如果你找到另一种方式,我会很有兴趣听到 .