Bootstrap 4.0“模态"不适用于 Angular 4 [英] Bootstrap 4.0 "Modal" not working with Angular 4
问题描述
无法让
执行 HTML 操作的 Bootstrap JavaScript 似乎没有在 Angular 4 项目中触发，当我在项目中使用完全相同的代码时，HTML 根本没有改变.
还有其他方法可以让我在 Angular 4 中使用 Bootstrap 吗?或者我应该在 Angular 4 中使用另一个不是 Bootstrap 的 Modal 解决方案?
您可以使用 ngx-bootstrap 库来做到这一点.安装库后，请按照以下步骤操作.
Step1:在app.module.ts文件中加入如下代码
import { ModalModule, BsModalRef } from 'ngx-bootstrap';@NgModule({进口:[ModalModule.forRoot(),...],提供者:[BsModalRef]})Step2:复制以下代码并粘贴到app.component.html.
<div class="modal-body">这是一个模态.
</ng-模板>
Step3:最后将以下代码复制到app.component.ts.
import { Component, TemplateRef } from '@angular/core';从'ngx-bootstrap/modal'导入{BsModalService}；从'ngx-bootstrap/modal/bs-modal-ref.service'导入{BsModalRef}；导出类 AppComponent {modalRef: BsModalRef;构造函数(私有 modalService:BsModalService){}openModal(模板:TemplateRef){this.modalRef = this.modalService.show(template,{ background: 'static', keyboard: false });}} Having trouble getting a Bootstrap 4.0 modal to work within an Angular 4 project.
The modal works great inside a simple static HTML page: 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>
You can see in the screen capture below, pressing displaying the Modal causes the html to be changed in several places, not only within the model HTML itself, butt the document's <body> element is manipulated as well.
The Bootstrap JavaScript that performs HTML manipulation appears to not be firing within the Angular 4 project, when I use that exact same code inside the project, the HTML is not changed at all.
Is there another way that I should be using Bootstrap with Angular 4? Or should I be using another Modal solution with Angular 4 that is not Bootstrap?
You can use ngx-bootstrap library to do this. After installing the library, follow these steps.
Step1: add the following code to app.module.ts file.
import { ModalModule, BsModalRef } from 'ngx-bootstrap';
@NgModule({
imports: [ModalModule.forRoot(),...],
providers: [BsModalRef]
})
Step2: copy the following code and paste to 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: and finally the following code copy to 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 });
}
}
这篇关于Bootstrap 4.0“模态"不适用于 Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
