我在我的应用程序中使用ng-bootstrap模式来显示对话框。但是当点击按钮时，没有任何事情发生，模态没有显示。 在调试时，它可能会发现操作被调用，但模态没有显示。
这是我的app.module.ts
import {NgModule } from '@angular/core';
import {BrowserModule } from '@angular/platform-browser';
import {TaskService} from '../app/task/task.service';
import {TaskComponent} from '../app/task/task.component';
import {AppComponent } from './app.component';
import {FormsModule ,ReactiveFormsModule} from '@angular/forms';
import {HttpModule } from '@angular/http';
import {RouterModule, Routes,Route } from '@angular/router';
import {AddNewTaskComponent} from './task/addtask.component';
import {EventComponent} from '../app/controller/event.component'
import {EventService} from '../app/service/event.service'
import {AddNewEventComponent} from '../app/controller/addevent.component'
import {AddEventService} from '../app/service/addevent.service'
import {WeatherComponent} from '../app/controller/weather.component'
import {LoginComponent} from '../app/controller/login.component'
import {RegisterComponent} from '../app/controller/register.component'
import {DashBoardcomponent} from '../app/controller/dashboard.component'
import {FeatureComponent,StoryComponents} from '../app/controller/feature.component'
import {AddTaskService} from '../app/task/addtask.service'
import {FeatureServices } from '../app/service/feature.services'
import {FileUploadComponents } from '../app/controller/fileUpload.component'
import {AngularFireModule } from 'angularfire2'
import {NgbModule } from '@ng-bootstrap/ng-bootstrap'
//index routing , redirect to login for the blank request
const indexRoutes:Route = {
path:'',component:LoginComponent
}
// for all invalid routers , it will redirect to login component
const fallbackRoutes = {
path:'**',component:LoginComponent
}
// order is important, routes get called on the order which they defined
const routes: Routes = [
indexRoutes,
{ path: 'register', component: RegisterComponent },
{ path: 'dash', component: DashBoardcomponent,
children: [
{ // shows feature as default
path: '',
redirectTo: 'feature',
pathMatch: 'full'
},
{
path: 'events',
component: EventComponent,
children:[
{
path: 'addevent',
component: AddNewEventComponent
}
]
},
{
path: 'task',
component: TaskComponent,
children:[
{
path: 'addtask',
component: AddNewTaskComponent
}
]
},
{
path: 'weather',
component: WeatherComponent
},
{
path: 'feature',
component: FeatureComponent,
},
{
path: 'uploads',
component: FileUploadComponents,
}
]
}
];
export const routing = RouterModule.forRoot(routes);
};
@NgModule({
imports: [
BrowserModule ,
FormsModule,
ReactiveFormsModule,
HttpModule,
routing,
AngularFireModule.initializeApp(firebaseConfig),
NgbModule.forRoot()
],
providers: [TaskService,EventService,AddEventService,AddTaskService,FeatureServices],
declarations: [
AppComponent,
LoginComponent,
TaskComponent,
AddNewTaskComponent,
EventComponent,
AddNewEventComponent,
WeatherComponent,
RegisterComponent,
DashBoardcomponent,
FeatureComponent,
FileUploadComponents,
StoryComponents
],
entryComponents: [StoryComponents],
bootstrap: [
AppComponent
],
})
export class AppModule { }
这是我的FeatureComponent类
import { Component, ViewChild,Input } from '@angular/core';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import {FeatureServices} from '../service/feature.services'
import {ComponentAction} from '../base/Component.action'
import {Features} from '../model/feature'
import { NgForm } from '@angular/forms';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'addstories',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class StoryComponents {
@Input() name;
constructor(public activeModal: NgbActiveModal) {}
}
@Component({
moduleId:module.id,
selector:'feature',
template:`
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<div>
<button class="btn btn-primary" (click)="listFeature()">All Features</button>
<button class="btn btn-primary" (click)="showAddFeature()" >Add Features</button>
</div>
{{enableAddFeature}}
<!-- loads child component list task and add new task -->
<router-outlet></router-outlet>
<form *ngIf="mode == 'insert' || mode == 'update' " #featureForm="ngForm" (ngSubmit)="processFeature(featureForm)">
<div class="form-group">
<label for="title">Feature Title</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Enter Feature Title" [(ngModel)]=selectedFeature.title>
</div>
<div class="form-group">
<label for="descr">Feature Title</label>
<input type="text" class="form-control" id="descr" name="descr" placeholder="Enter Feature Description" [(ngModel)]=selectedFeature.descr>
</div>
<div class="form-group">
<label for="area">Feature Title</label>
<input type="text" class="form-control" id="area" name="area" placeholder="Enter Feature Area" [(ngModel)]=selectedFeature.area>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br/>
<div class="container">
<div class="row">
<div class="">
<table class="table table-hover table-responsive table-bordered">
<thead>
<tr>
<th class="col-md-2">Title</th>
<th class="col-md-2">Descr</th>
<th class="col-md-1">Area</th>
<th class="col-md-1">User Stories</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let feature of features">
<td><a data-toggle="modal" data-target="#myModal">{{feature.title}}</a></td>
<td>{{feature.descr}}</td>
<td>{{feature.area}}</td>
<td *ngIf ="feature.userstories == null" >0</td>
<td *ngIf ="feature.userstories != null" > {{feature.userstories.length}}</td>
<td><a class='btn btn-info btn-xs' (click)="editFeature(feature._id)"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a (click)="deleteFeature(feature)" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<button type="button" class="btn btn-default" (click)="open()">Open me!</button>
`
})
export class FeatureComponent extends ComponentAction{
features:Features[]
mode :string = "start";
isEditMode = false;
selectedFeature: Features;
constructor(private featureService:FeatureServices,private modalService: NgbModal){
super();
this.getFeatures();
}
getFeatures(){
this.featureService.getFeatures()
.subscribe(result => {
console.log('features from mongo :'+JSON.stringify(result))
this.features = result;
console.log('this features :'+JSON.stringify(this.features))
})
}
open() {
console.log('u clicked me');
const modalRef = this.modalService.open(StoryComponents);
modalRef.componentInstance.name = 'World';
console.log('finshed');
}
}
我有一个功能列表，每个功能都包含不同的用户故事，所以我打算在模板上显示将来添加用户故事的选项。但是单击StoryComponent时没有显示。
答案 0 :(得分：17)
我遇到了同样的问题，问题出在CSS上。当我检查文档的元素时，发现模态元素已创建但未在屏幕中显示。在css下面已经解决了这个问题。
.modal-backdrop.fade
{
opacity: 0.5;
}
.modal-open .modal
{
opacity: 1;
}
答案 1 :(得分：7)
ng-bootstrap仅适用于Bootstrap 4，与Bootstrap 3不兼容。
答案 2 :(得分：1)
@Ansar Samad指出，它仅适用于Bootstrap4。如果您在Bootstrap 3项目中需要它，则可以签出https://www.npmjs.com/package/ng-bootstrap-to-bootstrap-3
说明：
{
"key": "ctrl+;",
"command": "macros.rerunCommand"
},
npm install ng-bootstrap-to-bootstrap-3在您代码中的某个位置。
就是这样！
答案 3 :(得分：0)
我也遇到同样的问题，发现我的styles.css中没有包含引导程序的CSS链接。虽然我在bootstrap v4中使用ng-bootstrap。
@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');
答案 4 :(得分：0)
现在更新 @ng-bootstrap/ng-bootstrap 到 ^8.0.1 解决了这个错误，
更新后如果出现此错误：
<块引用>在非 ES5 类上调用 getInternalNameOfClass() 中的错误
尝试将 compilerOptions 的 tsconfig.json 中的目标从 es5 更改为 es2015