为什么弹出模态引导程序没有出现在 Angular 4 中

Question

谁能帮我为什么我的弹出模式没有出现在页面中。我已经在我的 cli 中安装了引导程序，但仍然没有显示弹出窗口。除了下面的代码之外，您还需要配置什么吗？我相信bootstrap.min.js是使模态起作用的原因，我也添加了它，但它仍然没有显示

//.angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

//view.component.html
<div id="container-wrapper">
<div class="container">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-8 well">
<h3 class="text-info">Account Information</h3>
<br>
<div class = "container-fluid">    
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>ID Number</th>
<th>Full Name</th>
<th>Email Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let account of accounts">
<td>{{account.id}}</td>
<td>{{account.fullname}}</td>
<td>{{account.email}}</td>
<td>
<a class="teal-text" data-toggle="modal" data-target="#editmember"><i class="fa fa-pencil-square-o fa-lg"></i></a>
<a class="red-text"><i class="fa fa-times fa-lg"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="modal fade" id="editmember" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title text-info" id="myModalLabel">Edit Account Details</h4>
</div>
<div class="modal-body">    
<div class = "form-group">
<label>ID Number</label>
<input type = "number" class = "form-control"/>
</div>
<div class = "form-group">
<label>Full Name</label>
<input type = "text" class = "form-control"/>
</div>
<div class = "form-group">
<label>Email Address</label>
<input type = "email" class = "form-control"/>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss = "modal"><i class="fa fa-edit" aria-hidden="true"></i> Update</button>
</div>
</form>
</div>
</div>
</div>

Answer 1

引导的默认模式无法按预期工作，因为 angular 使用打字稿而不是 javascript。看看 ngx-bootstrap 它提供了一个模态模块：https://valor-software.com/ngx-bootstrap/#/。我在我参与的一个项目中使用了它，它与 angular 配合得很好。

Answer 2

首先-"../node_modules/bootstrap/dist/js/bootstrap.min.js"应该放在scripts: []部分下，而不是styles: []部分。

其次- 我建议研究一下 https://github.com/valor-software/ngx-bootstrap 哪个是 Angular 的引导包装器。它使与您的 Angular 应用程序集成变得更加容易。

Answer 3

从 npm 安装ngx-bootstrap

npm install ngx-bootstrap --save

您将需要引导程序样式(引导程序 3(

索引.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

app.module.ts(推荐(

import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

app.component.ts

import { setTheme } from 'ngx-bootstrap/utils';
@Component({…})
export class AppComponent {
constructor() {
setTheme('bs3'); // or 'bs4'
…
}
}

嵌入式编辑器不会向您显示确切的输出，因此请100%集成到您的代码中，它可以正常工作

<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">&times;</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
</ng-template>

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'demo-modal-service-static',
templateUrl: './service-template.html'
})
export class DemoModalServiceStaticComponent {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
}