角度6-将组件显示为来自component.ts的模式对话框

时间:2018-10-10 04:06:19

标签: angular modal-dialog bootstrap-modal

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

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()方法中打开确认模式对话框?我知道我可以使用服务,但有任何例子吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

大多数人会将这段代码放在父母的Submit方法中:

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

但是,我不确定这是父母/子女关系,所以我不确定您将获得多少成功。您可能被迫退后将代码放入父级的Submit方法中。让我知道,如果您找到另一种方法,我很想听听。