无法获得 Bootstrap 4.0 modal在 Angular 4 项目中工作。
模式在一个简单的静态 HTML 页面中工作得很好:https://jsfiddle.net/Lq73nfkx/1/
<!-- MODAL -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
您可以在下面的屏幕截图中看到，按下显示模式会导致 html 在多个位置发生更改，不仅在模型 HTML 本身内，而且在文档的 <body> 中。元素也被操纵。
执行 HTML 操作的 Bootstrap JavaScript 似乎没有在 Angular 4 项目中触发，当我在项目中使用完全相同的代码时，HTML 根本没有改变。
还有其他方法可以让我将 Bootstrap 与 Angular 4 一起使用吗？或者我应该使用另一个非 Bootstrap 的 Angular 4 模态解决方案吗？
最佳答案
您可以使用 ngx-bootstrap库来做到这一点。安装库后，请按照以下步骤操作。
第一步:在app.module.ts文件中添加如下代码。
import { ModalModule, BsModalRef } from 'ngx-bootstrap';
@NgModule({
imports: [ModalModule.forRoot(),...],
providers: [BsModalRef]
})
第 2 步:复制以下代码并粘贴到 app.commponent.html。
<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
</ng-template>
Step3: 最后将下面的代码copy到app.component.ts中。
import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
export class AppComponent {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
}
}
关于angular - Bootstrap 4.0 "Modal"不适用于 Angular 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48232092/