崩壊がモーダル

Question

では動作しません。私は、モーダル内、最も基本的な折りたたみ機能を使用しようとしていますが、崩壊は文字通り私のモーダルにthis w3schools collapse exampleをコピーし

をトリガしません。

これは私のモーダルコードです：

<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>を崩壊のように思えます。

モーダル内でデバッグしたとき、折りたたみボタンをトリガーするとDOMが操作されないので、<div>のクラスとその属性は変わりません。

アイデア？後述のように同様のことができます。「モンキーパッチ」ModalWindowのyout場合

Answer 1

：

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

Plunker Example

しかし、それは私有財産を使っているので、それは非常に汚い方法です。

あなたが好きng-bootstrapパッケージの一部であるNgbCollapseディレクティブを使用します。

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

Plunker Example

Answer 2

ng-bootstrap性の高いブートストラップのjQueryのベースのJavaScriptで角度2つのウィジェットを混合思いとどまら。実際には、ng-bootstrapのようなライブラリに行くのは、ではなく、ブートストラップのJSを使用することです。 ngbCollapse