折叠在模式中不起作用
Collapse doesn't work in a 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 { }
我的 AppModule:
@NgModule({
imports: [NgbModule, FormsModule],
declarations: [AppComponent, BasicModalComponent],
bootstrap: [AppComponent],
})
export class AppModule {
}
我尝试调试 DOM 中的折叠行为,好像当你折叠 <div>
时它会添加一些 classes 和一些属性,当折叠回来时它也改变了它们。
当我在 Modal 中调试它时,触发折叠按钮不会操纵 DOM,<div>
的 class 及其属性保持不变。
有什么想法吗?
在这种情况下,您可以 "monkey patch" 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>
ng-bootstrap highly discourages mixing Angular 2 widgets with Bootstrap's jQuery-based javascript. In fact the whole point of going with a library like ng-bootstrap是为了不使用Bootstrap的JS。
你应该做的是使用折叠指令:ngbCollapse
我正在尝试在模态框内使用最基本的折叠功能,但不会触发折叠功能
实际上只是将 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 { }
我的 AppModule:
@NgModule({
imports: [NgbModule, FormsModule],
declarations: [AppComponent, BasicModalComponent],
bootstrap: [AppComponent],
})
export class AppModule {
}
我尝试调试 DOM 中的折叠行为,好像当你折叠 <div>
时它会添加一些 classes 和一些属性,当折叠回来时它也改变了它们。
当我在 Modal 中调试它时,触发折叠按钮不会操纵 DOM,<div>
的 class 及其属性保持不变。
有什么想法吗?
在这种情况下,您可以 "monkey patch" 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>
ng-bootstrap highly discourages mixing Angular 2 widgets with Bootstrap's jQuery-based javascript. In fact the whole point of going with a library like ng-bootstrap是为了不使用Bootstrap的JS。
你应该做的是使用折叠指令:ngbCollapse