崩潰在模態中不起作用

Question

我正在嘗試在Modal中使用最基本的折疊功能，但折疊不會觸發

從字面上看，只是將這個w3schools崩潰示例復制到了我的Modal中。

這是我的模態代碼：

<template #content let-c="close" let-d="dismiss" ngbModalContainer>
  <div class="modal-header">
    <h4 class="modal-title">Collapse</h4>
  </div>
  <form>
    <div class="modal-body">
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
      <div id="demo" class="collapse">
            This is the collapsible text!
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
    </div>
  </form>
</template>

<button class="btn btn-success" (click)="open(content)">Open Modal</button>

我的BasicModalComponent：

@Component({
  selector: 'basic-modal',
  templateUrl: './BasicModal.html'
})
export class BasicModalComponent {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
}

我的AppComponent：

@Component({
    selector: 'my-app',
    template: '<basic-modal></basic-modal>'
})
export class AppComponent { }

我的AppModule：

@NgModule({
    imports: [NgbModule, FormsModule],
    declarations: [AppComponent, BasicModalComponent],
    bootstrap: [AppComponent],
})
export class AppModule {
}

我嘗試調試DOM中的折疊行為，好像當您折疊<div>它添加了一些類和少量屬性，而當將其折疊時，它也對其進行了更改。

當我在Modal中調試它時，觸發折疊按鈕不會操縱DOM， <div>的類及其屬性保持不變。

有任何想法嗎？

Answer 1

ng-bootstrap強烈建議不要將Angular 2小部件與Bootstrap的基於jQuery的javascript混合使用。 實際上，使用類似ng-bootstrap之類的庫的全部目的是不使用Bootstrap的JS。

相反，您應該使用折疊指令： ngbCollapse

Answer 2

在這種情況下，您可以如下所述“猴子補丁” ModalWindow ：

open(content) {
    // get reference to NgbModalRef
    let modal: any = this.modalService.open(content);
    modal.result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });

    let cancelPropagation = false;

    // overriding methods of NgbModalWindow 
    Object.assign(modal._windowCmptRef.instance.constructor.prototype, {
        stopPropagation: () => {
          cancelPropagation = true;
        },
        backdropClick: function() {
          if(cancelPropagation) { 
            cancelPropagation = false;
            return;
          }
          if (this.backdrop === true) {
            this.dismiss(ModalDismissReasons.BACKDROP_CLICK);
          }  
        }
    });
  }

柱塞示例

但這是一種非常骯臟的方式，因為它使用的是私有財產。

您將使用NgbCollapse指令，它是ng-bootstrap軟件包的一部分，例如：

<button type="button" class="btn btn-info" (click)="isCollapsed = !isCollapsed">
   Simple collapsible
</button>
<div [ngbCollapse]="isCollapsed">
   This is the collapsible text!
</div>

柱塞示例