以角度关闭活动模态答案

【问题标题】：Close active modal以角度关闭活动模态
【发布时间】：2021-11-12 02:09:56
【问题描述】：

我在我的 Angular 项目中打开了多个模式。我制作了一个模态组件作为内容的包装器。现在我想关闭活动模式而不是关闭所有模式。所以dismissAll需要被替换。我想使用 NgbActiveModal，但将其添加到构造函数后会立即出错。

浏览器中出现的错误信息

错误错误：未捕获（承诺中）：NullInjectorError：R3InjectorError(AppModule)[NgbActiveModal -> NgbActiveModal -> NgbActiveModal]： NullInjectorError：没有 NgbActiveModal 的提供者！ NullInjectorError: R3InjectorError(AppModule)[NgbActiveModal -> NgbActiveModal -> NgbActiveModal]: NullInjectorError: NgbActiveModal 没有提供者！

如何解决？

我的代码

import {Component, ElementRef, Input, ViewChild} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {faTimes} from '@fortawesome/free-solid-svg-icons';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';


@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
    @Input() titel: string = 'Editor';
    @Input() popupClass: string;
    @ViewChild('content') content: ElementRef;
    cross = faTimes;

    constructor(private modalService: NgbModal,
                private activeModal: NgbActiveModal) {
    }

    open() {
        this.modalService.open(this.content,
        {   ariaLabelledBy: 'modal-basic-title',
                        windowClass: this.popupClass
                }).result.then((result) => {}, (reason) => {
        });
    }

    close() {
        this.modalService.dismissAll()
    }
}

【问题讨论】：

标签： angular modal-dialog ng-bootstrap-modal

【解决方案1】：

您应该为当前打开的模式保留一个引用并只关闭那个：

@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
    @Input() titel: string = 'Editor';
    @Input() popupClass: string;
    @ViewChild('content') content: ElementRef;
    cross = faTimes;
    private modalRef: any;

    constructor(private modalService: NgbModal) {
    }

    open() {
        this.modalRef = this.modalService.open(this.content,
        {   ariaLabelledBy: 'modal-basic-title',
                        windowClass: this.popupClass
                }).result.then((result) => {}, (reason) => {
        });
    }

    close() {
        this.modalService.close(this.modalRef);
    }
}

【讨论】：

谢谢，但是 NgbModal 没有 close 方法。只有dismissAll 可用。有什么想法吗？
如果你想不通，have a look at the documentation 总是一个好主意。