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()
}
}
解决方案
您应该保留对当前打开的模式的引用并仅关闭该模式:
@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);
}
}
推荐阅读
- amazon-web-services - 阻止混合内容 EC2 HTTPS
- python - 如何单击没有 ID 的元素
- postgresql - 将数组字段存储在新表列中
- php - ziparchive 文件夹和文件排除当前文件夹
- r - R函数没有赋值
- java - 如何使用 spring-security-saml2 配置服务提供者以使用 EncryptedAssertions?
- javascript - 改进管脚输入元件
- python - 如何在 Git Bash 上更新 python?
- r - 以最有效的方式确保 dplyr::summarise() 中的唯一值
- javascript - 如何为有间隔的任务使用循环?