解雇/关闭时嵌套的NgbModal问题

Question

我正在尝试使用确认NgbModal到已经存在的NgbModal中，用作修改用户信息的表单。我在尝试关闭或解除确认模式时遇到问题：确认模式实际上需要关闭/解除两次而不是一次。

对我来说唯一可能导致这种情况的是确认模式被打开了两次，但我不明白这种行为将来自哪里......

function that calls the form modale

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 (form modale)

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

confirm.component.ts (confirm modale)

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

欢迎来到Stack Overflow。

这看起来是由您的构造函数引起的。

在每个类的构造函数中，您将设置活动模态;

this.activeModal = activeModal;

并且每个close方法都引用活动模态。

所以，你的每个班级都有自己的activeModal实例，但你关闭的代码却无法知道哪一个。

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

您需要引用正确的模态以在正确的时间关闭。

就像是：

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

Answer 2

实际上，你无法帮助我，因为失败的代码部分是更新模式的.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>

我的错，那么，谢谢你的答案！