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

Question

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

对我而言，唯一可能导致此结果的方法是两次打开确认模式，但我不知道这种行为从何而来...

调用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（格式为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（确认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

欢迎堆栈溢出。

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

在每个类的构造函数中，您要设置活动模式；

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

实际上，您对此无能为力，因为失败的代码部分位于更新modale的.html中。 我调用了send（）函数两次，因为我的按钮类型为“ submit”，带有（click）=“ send（）”，并且它的形式已经具有（ngSubmit）=“ send（）”。< / p>

mysql -u username -p database_name < file.sql

那我的错，谢谢您的回答！

Answer 3

<ng-template #showImage let-c="close" let-d="dismiss">
 <div class="modal-header">
  <h4 class="modal-title">Modal Header</h4>
 </div>
 <div class="modal-body">
        // ... 
 </div>
</ng-template>

在您要关闭模式的位置的按钮中使用(click)="d('Cross click');"

那会有所帮助。