NG-bootstrap模态组件无提供程序错误 [英] NG-bootstrap Modal Component no provider error
问题描述
我是角度2的ng-bootstrap库;特别是我正在查看:将组件作为内容.我试图将示例代码合并到我的项目中,但收效甚微.我从浏览器调试器中得到的错误是
I the ng-bootstrap library for angular 2; in particular i am looking at: Components as content. I've tried to incorporate the example code into my project with very little success. The error i get from the browser debugger is
没有提供NgbModal的提供程序,我在示例代码中没有看到任何内容.我不确定在哪里可以设置angular 2项目进行演示.我要做的只是拿他们的示例代码并将其实现到ng new <projectname>
将使用modile.component.ts
和app.component.ts
文件生成的标准项目中.
No provider for NgbModal, i didn't see anything in the example code that had. I am not sure where i can setup an angular 2 project to demo sadly. All i wanted to do was take their example code and implement it into the standardly project that ng new <projectname>
will generate with modile.component.ts
and app.component.ts
files.
app.module.ts
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { NgbdModalComponent, NgbdModalContent } from './modal.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
NgbdModalComponent, NgbdModalContent
],
entryComponents: [NgbdModalContent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
}
app.component.html
<div class="container-fluid">
<hr>
<p>
This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
</p>
<hr>
<ngbd-modal-component></ngbd-modal-component>
</div>
modal.component.ts
import {Component, Input} from '@angular/core';
import {NgbModal, NgbActiveModal} 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>NgbdModalComponent
<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: 'ngbd-modal-component',
templateUrl: './modal.component.html'
})
export class NgbdModalComponent {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
}
}
modal.component.html
<p>You can pass an existing component as content of the modal window. In this case remember to add content component
as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>
<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>
错误:没有NgbModal的提供程序,错误上下文,未处理的承诺拒绝:没有NgbModal的提供程序.感谢您的反馈.
The ERRORs: No provider for NgbModal, Error Context, Unhandled Promise rejection: no provider for NgbModal. Thanks for the feedback.
推荐答案
您必须将NgbModule
导入到NgModule
的 imports 数组中.
you have to import NgbModule
to your imports array of NgModule
.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
...
imports: [NgbModule.forRoot(), ...],
...
})
export class AppModule {
}
这篇关于NG-bootstrap模态组件无提供程序错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!