Angular2条目组件不起作用

时间:2017-06-27 12:10:43

标签: angular

我正在尝试按照教程向我的项目添加自定义对话框组件,但是当我将组件添加到模块中的entryComponents集合时,我收到以下错误: -

错误:未捕获(在承诺中):错误:组件AdditionCalculateWindow不是任何NgModule的一部分,或者模块尚未导入到您的模块中。 错误:组件AdditionCalculateWindow不是任何NgModule的一部分,或者模块尚未导入模块。     在JitCompiler._createCompiledHostTemplate(http://localhost:4200/vendor.bundle.js:86877:19)     在http://localhost:4200/vendor.bundle.js:86843:37     at Array.forEach(native)     在http://localhost:4200/vendor.bundle.js:86841:45     at Array.forEach(native)     在JitCompiler._compileComponents(http://localhost:4200/vendor.bundle.js:86830:43)     在createResult(http://localhost:4200/vendor.bundle.js:86731:19)     在ZoneDelegate.webpackJsonp.716.ZoneDelegate.invoke(http://localhost:4200/polyfills.bundle.js:2779:26)     在Zone.webpackJsonp.716.Zone.run(http://localhost:4200/polyfills.bundle.js:2529:43)     在http://localhost:4200/polyfills.bundle.js:3205:57     在JitCompiler._createCompiledHostTemplate(http://localhost:4200/vendor.bundle.js:86877:19)     在http://localhost:4200/vendor.bundle.js:86843:37     at Array.forEach(native)     在http://localhost:4200/vendor.bundle.js:86841:45     at Array.forEach(native)     在JitCompiler._compileComponents(http://localhost:4200/vendor.bundle.js:86830:43)     在createResult(http://localhost:4200/vendor.bundle.js:86731:19)     在ZoneDelegate.webpackJsonp.716.ZoneDelegate.invoke(http://localhost:4200/polyfills.bundle.js:2779:26)     在Zone.webpackJsonp.716.Zone.run(http://localhost:4200/polyfills.bundle.js:2529:43)     在http://localhost:4200/polyfills.bundle.js:3205:57     at resolvePromise(http://localhost:4200/polyfills.bundle.js:3157:31)     at resolvePromise(http://localhost:4200/polyfills.bundle.js:3128:17)     在http://localhost:4200/polyfills.bundle.js:3205:17     在ZoneDelegate.webpackJsonp.716.ZoneDelegate.invokeTask(http://localhost:4200/polyfills.bundle.js:2812:31)     在Zone.webpackJsonp.716.Zone.runTask(http://localhost:4200/polyfills.bundle.js:2579:47)     在drainMicroTaskQueue(http://localhost:4200/polyfills.bundle.js:2972:35)     在

这是我的组成部分: -

import { Component } from '@angular/core';

import { DialogRef, ModalComponent } from 'angular2-modal';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';

export class AdditionCalculateWindowData extends BSModalContext {
constructor(public num1: number, public num2: number) {
    super();
}
}

@Component({
selector: 'modal-content',
styles: [`
    .custom-modal-container {
        padding: 15px;
    }

    .custom-modal-header {
        background-color: #219161;
        color: #fff;
        -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
        margin-top: -15px;
        margin-bottom: 40px;
    }
`],
template: `
    <div class="container-fluid custom-modal-container">
        <div class="row custom-modal-header">
            <div class="col-sm-12">
                <h1>A Custom modal design</h1>
            </div>
        </div>
        <div class="row" [ngClass]="{'myclass' : shouldUseMyClass}">
            <div class="col-xs-12">
                <div class="jumbotron">
                    <h1>Do the math to quit:</h1>
                    <p class="lead">I received an injection of the number 
<strong>{{context.num1}}</strong> and the number <strong>{{context.num2}}
</strong></p>
                    <span>What is the sum?</span>
                     <input class="form-control" type="text" #answer 
(keyup)="onKeyUp(answer.value)" autofocus>
                </div>
            </div>
        </div>
    </div>`
})
export class AdditionCalculateWindow implements 
ModalComponent<AdditionCalculateWindowData> {
context: AdditionCalculateWindowData;

public wrongAnswer: boolean;

constructor(public dialog: DialogRef<AdditionCalculateWindowData>) {
    this.context = dialog.context;
    this.wrongAnswer = true;
}

onKeyUp(value) {
    this.wrongAnswer = value != 5;
    this.dialog.close();
}


beforeDismiss(): boolean {
    return true;
}

beforeClose(): boolean {
    return this.wrongAnswer;
}
}

这是我的app模块: -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BlockUIModule } from 'ng-block-ui';
import { ToastModule } from 'ng2-toastr/ng2-toastr';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
import { NgxPaginationModule } from 'ngx-pagination';
import { Ng2OrderModule } from 'ng2-order-pipe';
import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
import { Select2Module } from 'ng2-select2';

//Components
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ConfigurationComponent } from 
'./configuration/configuration.component';
import { ConfigurationAddComponent } from './configuration/configuration-
add.component';

//Services
import { FileService } from './services/file.service';
import { ConfigurationService } from './services/configuration.service';

//Guards
import { ConfigurationGuard } from "./configuration/configuration.guard";

//Pipes
import { OrderByPipe } from './shared/order-by.pipe';
import { FilterAnyPipe } from './shared/filter-any.pipe';

//Modal
import { AdditionCalculateWindow } from "./configuration/configuration-add-
file-spec-name-template";

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    ConfigurationComponent,
    ConfigurationAddComponent,
    OrderByPipe,
    FilterAnyPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    BlockUIModule,
    BrowserAnimationsModule,
    NgxPaginationModule,
    Select2Module,
    Ng2OrderModule,
    RouterModule.forRoot([
      { path: 'dashboard', component: DashboardComponent },
      { path: 'configuration', canActivate: [ConfigurationGuard], component: 
ConfigurationComponent },
      { path: 'configuration-add/:fileSpecId', component: 
ConfigurationAddComponent },
      { path: 'configuration-add', component: ConfigurationAddComponent },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
    ]),
    NgbModule.forRoot(),
    ToastModule.forRoot(),
    ModalModule.forRoot(),
    BootstrapModalModule
  ],
  providers: [FileService, ConfigurationService, ConfigurationGuard],
  bootstrap: [AppComponent],
    // IMPORTANT: 
  // Since 'AdditionCalculateWindow' is never explicitly used (in a 
  template)
  // we must tell angular about it.
  entryComponents: [ AdditionCalculateWindow ]
})
export class AppModule { }

任何想法是什么问题?

3 个答案:

答案 0 :(得分:1)

您还应将AdditionCalculateWindow添加到declarations

答案 1 :(得分:0)

您没有在ngModule中导入AdditionCalculateWindow。 加 import:[AdditionCalculateWindow,...]

答案 2 :(得分:0)

通过将AdditionCalculateWindow添加到声明列表来解决问题。有趣的是,该演示实际上并没有这样做,但它解决了我的问题