Bootstrap 4.0"Modal"不适用于Angular 4 [英] Bootstrap 4.0 "Modal" not working with Angular 4
问题描述
让 Bootstrap 4.0模态在Angular 4项目中工作时遇到麻烦
Having trouble getting a Bootstrap 4.0 modal to work within an Angular 4 project.
该模式在简单的静态HTML页面中非常有用: https://jsfiddle.net/Lq73nfkx/1/
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>
您可以在下面的屏幕截图中看到，按下显示Modal，不仅可以在模型HTML本身内部，而且可以在文档的<body>元素中进行操作，从而在多个位置更改html.
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.
执行HTML操作的Bootstrap JavaScript在Angular 4项目中似乎没有触发，当我在项目中使用完全相同的代码时，HTML根本没有改变.
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.
在Angular 4中应该使用Bootstrap的另一种方式吗?还是我应该在Angular 4上使用不是Bootstrap的另一个Modal解决方案?
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?
推荐答案
您可以使用 ngx -bootstrap 库来执行此操作.安装该库之后，请按照下列步骤操作.
步骤1:将以下代码添加到app.module.ts文件中.
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]
})
第2步:复制以下代码并将其粘贴到app.commponent.html.
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:最后将以下代码复制到app.component.ts.
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"Modal"不适用于Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
