Я использую модальный 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 не отображается.
