崩溃并不在模式

工作，我试图用一个模式里面的最基本崩溃的功能，但崩溃并不在模式

字面上只是复制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>它添加了一些类和几个属性，当它折叠回来它也改变它们。

当我在Modal中调试它时，触发折叠按钮不会操纵DOM，<div>的类和其属性保持不变。

任何想法？

来源

2016-09-05 Kesem David

您的问题就设在这里https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/modal/ modal-window.ts＃L57 – yurzui

@yurzui感谢您的回复，您能否向我解释一下？ –

Bootstrap崩溃事件点击文档http://take.ms/mAhbw上的句柄，但是'ModalWindow'组件通过'stopPropagation'断开冒泡 – yurzui

在YOUT情况下，你可以在“猴补丁” 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); 
      } 
     } 
    }); 
    }

Plunker Example

但正是因为它使用私有财产非常肮脏的方式。

你会使用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>

Plunker Example

来源

2016-09-05 20:10:24 yurzui

所以我采取了你的建议，并使用'ngbCollapse'而不是bootstrap的崩溃，它确实工作。我现在想知道的是，有没有办法让它在引导程序崩溃时崩溃的动画？ –

ng-bootstrap高度不鼓励混合角2个部件与引导的基于jQuery的的JavaScript。事实上，像ng-bootstrap这样的库去而不是使用Bootstrap的JS。

什么，你应该做的，而不是为使用崩溃指令：ngbCollapse

来源

2016-09-07 15:00:55

我看到，有没有一种方法可以实现引导程序与'ngbCollapse'组件的崩溃动画？ –

对于原生指令的动画在这一点上是一项正在进行的工作。该项目非常活跃，因此动画着陆不需要很长时间。 –

非常感谢您的信息！ :) –

崩溃并不在模式

回答

相关问题