Angular 6 - отображение компонента в виде модального диалога из component.ts - PullRequest
Новая
       29

Angular 6 - отображение компонента в виде модального диалога из component.ts

0 голосов
/ 10 октября 2018

Я пытаюсь отобразить всплывающее окно модального подтверждения после выполнения действия отправки из моего компонента.

Метод onSubmit () в моем home.component.ts: 

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

Мой подтверждающий модальный компонент: import {Component, Input} from '@ 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 - это обычный HTML-шаблон ng-bootstrap.Итак, вопрос в том, как я могу открыть модальное диалоговое окно подтверждения из метода onSubmit ()?Я понимаю, что могу использовать службу, но есть ли примеры?

Спасибо.

1 Ответ

0 голосов
/ 10 октября 2018

Большинство людей помещают этот код в метод отправки родителя: 

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

Обратите внимание на использование ConfirmationModal в приведенном выше коде.

Вам также необходимо переместить логику закрытия вparent.

Однако я вижу, что вы пытаетесь найти что-то более пригодное для повторного использования.

Что вам нужно сделать, это вызвать метод open из вашего home.component

Для вызова дочернего метода в родительских / дочерних отношениях легко использовать @ ViewChild

Документы находятся здесь: https://angular.io/guide/component-interaction#parent-calls-an-viewchild

Однако я не уверен, что это родительские / дочерние отношениятак что я не уверен, какой успех вы будете иметь.Возможно, вам придется вернуться к размещению кода внутри метода submit родителя.Дайте мне знать, если вы найдете другой способ, мне было бы интересно услышать.

...