使用多個引導模式（ngx-bootstrap 和 Angular）時遇到問題

Question

我在 Angular 4 中使用多個引導模式確實有問題。也許你可以幫我解決這個問題。 該代碼僅使用一種模態即可正常工作。 我無法使用第一個加載的模態的按鈕/表單。 第二個工作正常。 打開和關閉第二個模態后，第一個模態也起作用了……很奇怪。 有什么問題嗎？

 <!-- ADD MODAL--> <div bsModal #addModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myAddModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Add Dimension</h4> <button type="button" class="close" (click)="addModal.hide()" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="formGroupInput">TAG</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" aria-describedby="keyHelp" value="" disabled> <small id="keyHelp" class="form-text text-muted">Notice that this field is a surrogate key!</small> </div> <div class="form-group"> <label for="formGroupInput2">Name</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value=""> </div> <div class="form-group"> <label for="formGroupInput3">Description</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value=""> </div> </form> </div> <div class="modal-footer"> <button type="button" id="dfsdfsdfsdf" class="btn btn-secondary" (click)="addModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- EDIT MODAL--> <div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Edit {{currentItem?.NAME}}</h4> <button type="button" class="close" (click)="editModal.hide()" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="formGroupInput">TAG</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" aria-describedby="keyHelp" value="{{currentItem?.TAG}}" disabled> <small id="keyHelp" class="form-text text-muted">You'll need to delete this entry to change this key value!</small> </div> <div class="form-group"> <label for="formGroupInput2">Name</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value="{{currentItem?.NAME}}"> </div> <div class="form-group"> <label for="formGroupInput3">Description</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value="{{currentItem?.COMM}}"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="editModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

 import { Component, OnInit, ViewChild } from '@angular/core'; import { DataService } from "../data.service"; import { ModalDirective } from 'ngx-bootstrap/modal/modal.component'; @Component({ templateUrl: './dimensions.component.html', styleUrls: ['./dimensions.component.scss'] }) export class DimensionsComponent implements OnInit { @ViewChild('editModal') public editModal: ModalDirective; @ViewChild('addModal') public addModal: ModalDirective; currentItem; openModal(item: any) { this.currentItem = item; this.editModal.show(); } openAddModal() { this.addModal.show(); } //Attributes public currentVar; subscription; dimensionData; rows; constructor(private _dataService: DataService) { }

謝謝你們的時間！

更新：通過在代碼內切換模態序列，問題也會發生，但只是在其他模態方面。

Answer 1

bsModal 指令並不真正適合嵌套模態，請轉換為 bsModal 服務的使用，請參見此處的示例： https ://valor-software.com/ngx-bootstrap/#/modals#service-nested

Answer 2

因此，經過一些修復、生產使用和測試后，我可以說我已經找到了嵌套 ngx-bootstrap 模態問題的解決方案。 我為BsModalService編寫了一個服務包裝器。

modalIndexing = {};
hasInited = false;

constructor(
    router: Router,
    private modalService: BsModalService,
) {
    router.events
        .pipe(filter((event: NavigationEvent) => (event instanceof NavigationStart)))
        .subscribe(() => this.terminateAll());
}

// Just a modal dude
resolveModal(component, position: 'center' | 'static' = 'center', initialState?: any): void {
    const config: ModalOptions = {
        class: modalClassDict[position] + ' ss-modal',
        initialState
    };

    // For nested launches, wait until previous hide to open new
    setTimeout(() => {
        this.modalService.show(component, config);
    }, initialState.hasTimeout ? 600 : 0);
}

// Modal dude that will return something 
// if you want to of cause, no pressure
resolveModalSub(component, position: 'center' | 'static' = 'center', initialState?: any): Observable<any> {
    const config: ModalOptions = {
        class: modalClassDict[position] + ' ss-modal',
        initialState
    };

    const bsModalRef = this.modalService.show(component, config);
    bsModalRef.content.onClose = new Subject<any>();

    const modalSub = bsModalRef.content.onClose.pipe(take(1));
    this.healthCheck(modalSub);

    return modalSub;
}

// This sneaky little bastard will return something if it hides!
resolveModalSubCheckHide(component, position: 'center' | 'static' = 'center', initialState?: any): Observable<any> {
    const config: ModalOptions = {
        class: modalClassDict[position] + ' ss-modal',
        initialState
    };

    const bsModalRef = this.modalService.show(component, config);
    bsModalRef.content.onClose = new Subject<any>();

    const modalSub = bsModalRef.content.onClose.pipe(take(1));
    this.healthCheck(modalSub, true);

    return modalSub;
}

// This thingy does some pseudo-indexing and cleans up the mess you left
private healthCheck(modalSub, needToCheckHide = false) {

    // The only property ngx-bootstrap modal service
    // is able to return is the number of openned modals
    // so we are heading out from it 
    const index = this.modalService.getModalsCount();

    this.modalIndexing[index] = {
        modalSub,
        needToCheckHide
    };

    // First modal initiates onHide sub 
    if (!this.hasInited) {
        this.hasInited = true;

        this.modalService.onHide
            .subscribe(() => {
                if (_.keys(this.modalIndexing).length) {
                    // This event emits after the modal is closed so its a +1
                    const indexedSub = this.modalIndexing[this.modalService.getModalsCount() + 1];

                    // Handeles the case when you need to know if modal was closed
                    if (indexedSub.needToCheckHide) {
                        indexedSub.modalSub.next(false);
                    }

                    // Completes sub of a value return and cleans itself from dictionary
                    if (indexedSub.modalSub) {
                        indexedSub.modalSub.complete();
                    }
                    delete this.modalIndexing[this.modalService.getModalsCount() + 1];
                }
            });
    }
}

// Termiantes all modal windows in user navigates via back / forward
private terminateAll() {
    _.keys(this.modalIndexing).forEach(index => this.modalService.hide(index));
}

基本用法：

const data = {
  // your initial data
};

this.dialogService.resolveModalSubCheckHide(YourModalComponentToDisplay, 'center', data)
  .subscribe((value) => {
      // processing
  });

特點：

• 作為主題的返回值處理
• 性能友好
• 不會留下任何未完成的科目
• 如果隱藏，可以返回一個值
• 處理無限的嵌套級別
• 可以排隊啟動模態
• 手動導航時自動關閉

希望這有助於某人<3。