0
我想要显示一个模式，当我点击一个按钮，但是我发现有事情正在发生，但模式不可见。 我试图遵循plunker 必须有我的NgModule声明，供应商，进口的错误...Toogle Ng-Bootstrap Modal in Angular 4
devices.component.ts
import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild,} from '@angular/core';
import {Http} from "@angular/http";
import {Headers} from '@angular/http';
import {Router} from "@angular/router";
import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
@Component({
selector: 'ngbd-modal-content',
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 NgbdModalContent {
@Input() name;
constructor(public activeModal: NgbActiveModal) {}
}
@Component({
selector: 'devices',
templateUrl: 'devices.template.html'
})
export class DevicesComponent implements OnDestroy, OnInit {
public constructor(
private http: Http,
public router: Router,
private modalService: NgbModal
) {
this.nav = document.querySelector('nav.navbar');
localStorage.setItem('currrentRoute', 'devices');
}
public openModal() {
// jQuery(this.myModal.nativeElement).modal('show');
//alert('hello');
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
}
}
呼叫我devices.template.html
<h5>My Registered <strong>devices</strong></h5>
<button class="btn btn-primary pull-right" type="button" (click)="openModal()">
<i class="fa fa-plus"></i> Add a device
</button>
appviews.module.ts
@NgModule({
declarations: [
UserComponent,
DevicesComponent,
DeviceComponent,
NgbdModalContent
],
imports: [
BrowserModule,
RouterModule,
DataTableModule,
PeityModule,
SparklineModule,
NgbModule.forRoot()
],
exports: [
UserComponent,
DevicesComponent,
DeviceComponent,
],
entryComponents: [NgbdModalContent],
})
export class AppviewsModule {
}
app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AuthModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
DashboardsModule,
LayoutsModule,
AppviewsModule,
RouterModule.forRoot(ROUTES)
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }