angular - 以角关闭活动模态

Question

我在我的角度项目中打开了多个模式。我制作了一个模态组件作为内容的包装器。现在我想关闭活动模式而不是关闭所有模式。所以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()
    }
}

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