我正在尝试在 Modal 中使用最基本的折叠功能,但不会触发折叠
字面上只是复制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>
我的基本模态组件:
@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 { }
我的应用模块:
@NgModule({
imports: [NgbModule, FormsModule],
declarations: [AppComponent, BasicModalComponent],
bootstrap: [AppComponent],
})
export class AppModule {
}
我尝试调试 DOM 中的折叠行为,当您折叠 <div>
时似乎是这样它添加了一些类和一些属性,并且在将其折叠回去时也会更改它们。
当我在 Modal 中调试它时,触发折叠按钮不会操作 DOM,<div>
的类并且它的属性保持不变。
有什么想法吗?
最佳答案
ng-bootstrap强烈反对将 Angular 2 小部件与 Bootstrap 基于 jQuery 的 javascript 混合使用。事实上,使用像 ng-bootstrap 这样的图书馆的全部意义在于就是不使用Bootstrap的JS。
你应该做的是使用折叠指令:ngbCollapse
关于javascript - 折叠在模式中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39330995/