如何解决打开相同 Ngx-Bootstrap Modals 的多板
我的项目在很大程度上依赖于使用模态来显示图表、报告和类似数据表示等数据。模态的定义方式是这样的:
import {Component,EventEmitter,OnInit,Output,ViewChild} from '@angular/core';
import {Device} from "@app/main/models/device";
import {DeviceInformationComponent} from "@app/main/device-overview/device-information/device-information.component";
import {ModalDirective} from "@node_modules/ngx-bootstrap/modal";
@Component({
selector: 'device-information-modal',templateUrl: './device-information-modal.component.html',styleUrls: ['./device-information-modal.component.scss']
})
export class DeviceInformationModalComponent implements OnInit {
@ViewChild('deviceInformation') deviceInformation: DeviceInformationComponent;
@ViewChild('deviceInformationModal',{static: true}) modal: ModalDirective;
@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
device: Device;
constructor() {
}
ngOnInit(): void {
}
show(device: Device): void {
this.device = device;
this.modal.show();
// this.deviceInformation.initFunction(device);
}
close(data): void {
// this.deviceInformation.closeFunction();
this.modalSave.emit(data);
this.modal.hide();
}
}
<div appBsModal #deviceInformationModal="bs-modal" class="modal fade" tabindex="100" role="dialog"
aria-hidden="true"
[config]="{backdrop: 'static'}">
<div class="modal-dialog modal-xxl">
<div class="modal-content" *ngIf="modal.isShown">
<rse-modal-header (onClose)="close(null)"
[title]="'TasDetails'"
[disabledClose]="(deviceInformation&&deviceInformation.closeDisabled)"
[subTitle]="device.name"></rse-modal-header>
<div class="modal-body" >
<device-information #deviceInformation [modalCloseFunction]="close" [device]="device" ></device-information>
</div>
</div>
</div>
</div>
在我想调用模态的组件中,它是这样定义的:
<device-information-modal #deviceInformationModal></device-information-modal>
并且可以这样打开:
this.deviceInformationModal.show(this.device);
它的工作方式:我打开模态以查看设备的信息。在此模式中,我现在将看到属于特定组的所有其他设备。现在,应该可以使用另一个设备打开另一个模态作为 show(device) 参数,这基本上意味着模态会自行打开。 我尝试了两种不同的方法: 我自己定义了模态。这不起作用,因为应用程序会不确定地尝试在 parentModal 底部的 childModal 中呈现。我试图通过将它们包装在 ngIf="modal.isShown" 中来“延迟加载”childmodal:
<ng-template *ngIf="modal.isShown">
<device-information-modal #deviceInformationModalChild></device-information-modal>
</ng-template>
这也不起作用,因为我无法访问#deviceInformationModalChild,因为我无法理解。
我也尝试从同一个引用多次打开同一个模态,但显然这也不起作用。
我真的别无选择,不知道如何解决这个问题。
最好的问候
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。