Вложенная проблема NgbModal при закрытии / закрытии

Question

Я пытаюсь использовать подтверждение NgbModal в уже существующем NgbModal, используемом в качестве формы для изменения информации пользователя.Я сталкиваюсь с проблемой, пытаясь закрыть или отклонить модальное подтверждение: модальное подтверждение на самом деле требует, чтобы его закрывали / закрывали дважды, а не один раз.

Единственное, что может привести к этому для меня, это то, чтомодальное подтверждение было открыто дважды, но я не понимаю, откуда это поведение ...

функция, которая вызывает модальную форму

public showUserUpdateModale(user: User): void {
    let modalRef1: NgbModalRef;
    modalRef1 = this.modalService.open(UpdateUsersComponent);
    modalRef1.componentInstance.user = user;
    modalRef1.result.then((newUser: User): void => {
      this.userBusiness.updateUser(newUser)
        .then((res: any) => {
          this.toastr.success(`Les informations de l\'utilisateur ${user.firstname} ${user.lastname} ont été prises en compte.`, 'Modification réussie');
        })
        .catch((err: any) => {
          this.toastr.error('Erreur interne', 'Erreur');
        });
    }).catch((err1: any): void => {
      this.toastr.info('Aucune modification n\'a été enregistrée.');
    });
  }

update-user.component.ts(модальная форма)

import { Component, Input, OnInit } from '@angular/core';
import { NgbActiveModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { User } from 'src/app/models/user';
import { ConfirmComponent } from '../confirm';
import { ModalService } from '../../../services/modal.service';

@Component({
    selector: 'update-user',
    templateUrl: './update-user.component.html',
    styleUrls: ['./update-user.component.scss']
})
export class UpdateUsersComponent implements OnInit {

    @Input() public user: User;
    public newUser: User;

    private activeModal: NgbActiveModal;
    private modalService: ModalService;

    constructor(activeModal: NgbActiveModal, modalService: ModalService) {
        this.activeModal = activeModal;
        this.modalService = modalService;
    }

    public ngOnInit(): void {
        this.newUser = Object.assign({}, this.user);
    }

    public dismiss(): void {
        this.activeModal.dismiss(false);
    }

    public send(): void {
        let modalRef2: NgbModalRef;
        modalRef2 = this.modalService.open(ConfirmComponent);
        modalRef2.componentInstance.message = `<p>Êtes-vous sûr de vouloir valider les modifications apportées à l\'utilisateur ${this.user.firstname} ${this.user.lastname} ?</p>`;
        modalRef2.componentInstance.title = 'Confirmer les modifications';
        modalRef2.result.then((data: any): void => {
            this.activeModal.close(this.newUser);
        })
        .catch((err2: any) => {
            console.log('test');
        });
    }
}

verify.component.ts (подтвердить модальный режим)

import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'confirm',
    templateUrl: './confirm.component.html',
    styleUrls: ['./confirm.component.scss']
})
export class ConfirmComponent {

    @Input() public title: string;
    @Input() public message: string;

    private activeModal: NgbActiveModal;

    constructor(activeModal: NgbActiveModal) {
        this.activeModal = activeModal;
    }

    public dismiss(): void {
        this.activeModal.dismiss(false);
    }

    public send(): void {
        this.activeModal.close(true);
    }
}

modal.service.ts

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';

@Injectable()
export class ModalService {

    private ngbModal: NgbModal;

    constructor(
        ngbModal: NgbModal
    ) {
        this.ngbModal = ngbModal;
    }

    public open(content, options = {}) {
        return this.ngbModal.open(content, { size: 'lg', backdrop: true, centered: true, ...options });
    }
}

Answer 1

На самом деле, вы не могли бы помочь мне в этом, потому что часть кода, которая не работала, была в .html модальности обновления. Я дважды вызывал функцию send (), потому что у меня был тип кнопки "submit" с (click) = "send ()" И это было в форме, в которой уже было (ngSubmit) = "send ()".

<form (ngSubmit)="send()" #loginForm="ngForm">
    <div class="modal-header">
        <!-- code -->
    </div>
    <div class="modal-body">
        <!-- code -->        
    </div>
    <div class="modal-footer">
        <!-- code -->
        <button class="btn btn-primary btn-lg btn-primary-light-blue" type="submit" (click)="send()">Valider la modification</button>
    </div>
</form>

Тогда я виноват, спасибо за ответы!

Answer 2

добро пожаловать в переполнение стека.

Это похоже на ваши конструкторы.

В каждом конструкторе класса вы устанавливаете активный модал;

this.activeModal = activeModal;

и каждый из ваших методов закрытия ссылается на активный модал.

Итак, у каждого из ваших классов есть свой экземпляр activeModal, но ваш код для закрытия не может знать, какой именно.

 modalRef2.result.then((data: any): void => {
            this.activeModal.close(this.newUser);
        })

Вам нужно будет указать правильный модальный режим, чтобы закрытьв правильное время.

Что-то вроде:

 modalRef2.result.then((data: any): void => {
            modalRef2.close(this.newUser);
        })