Question

我有3个组件。专栏编辑 2.标题编辑 3. rubric描述符编辑器

rubric编辑器是在路由器插座中加载的主要组件。 rubric编辑器加载rubric条件编辑器，它需要一个Input对象，rubric标准编辑器加载需要输入Object的rubric描述符编辑器。

但是，这不起作用。我得到core2.Input不是rubric描述符编辑器中@Input行的函数错误。（错误阻止boot.ts并且没有运行）完整堆栈跟踪：

Error: core_2.Input is not a function
    Error loading http://localhost:9080/app/boot.js
Stack trace:
.execute/RubricDescriptorEditorComponent<@http://localhost:9080/app/components/rubric/rubric-editor-descriptor.js:44:21
.execute@http://localhost:9080/app/components/rubric/rubric-editor-descriptor.js:37:48
ensureEvaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2981:5
ensureEvaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2973:11
ensureEvaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2973:11
ensureEvaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2973:11
ensureEvaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2973:11
bootstrap/</</</</</<.execute@http://localhost:9080/node_modules/systemjs/dist/system.src.js:3099:13
doDynamicExecute@http://localhost:9080/node_modules/systemjs/dist/system.src.js:715:20
link@http://localhost:9080/node_modules/systemjs/dist/system.src.js:908:20
doLink@http://localhost:9080/node_modules/systemjs/dist/system.src.js:569:7
updateLinkSetOnLoad@http://localhost:9080/node_modules/systemjs/dist/system.src.js:617:18
proceedToTranslate/</<@http://localhost:9080/node_modules/systemjs/dist/system.src.js:430:11
run@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:138:14
zoneBoundFn@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:111:14
lib$es6$promise$$internal$$tryCatch@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:1511:16
lib$es6$promise$$internal$$invokeCallback@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:1523:17
lib$es6$promise$$internal$$publish@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:1494:11
[4]</</</<@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:243:5
run@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:138:14
zoneBoundFn@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:111:14
lib$es6$promise$asap$$flush@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:1305:9

我不确定为什么会出现这个错误。我在另一个组件中有一个非常相同的代码，它工作正常。

为什么我要这样做？我需要从用户那里获取一些数据作为输入，它形成一个双嵌套的json结构。

这是来自rubric-descriptor-editor.ts的代码：

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {
    RouteConfig,  ROUTER_DIRECTIVES, Router,
    LocationStrategy, HashLocationStrategy
} from 'angular2/router';
import RubricService from "../../services/rubric-service";
import {Rubric} from "../../models/rubric";
import {Input} from "angular2/core";
import {Criteria} from "../../models/criteria";
import {Descriptor} from "../../models/descriptor";

@Component({
    selector: '[myDr]',
    templateUrl: './app/components/rubric/rubric-editor-descriptor-form.html',
    directives: [CORE_DIRECTIVES,ROUTER_DIRECTIVES,FORM_DIRECTIVES]
})

export class RubricDescriptorEditorComponent {
    @Input('myDr') levDesc: Descriptor;
    constructor (public rubricService: RubricService, public router:Router ){
    }
}

此组件的模板：

<textarea class="form-control" rows="6" placeholder="Descriptor "
         #descriptor="ngForm"
         [(ngModel)]="levDesc.descriptor"
         ngControl="descriptor" ></textarea>

我的rubric-criteria-editor：

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {
    RouteConfig,  ROUTER_DIRECTIVES, Router, RouteParams,
    LocationStrategy, HashLocationStrategy
} from 'angular2/router';
import RubricService from "../../services/rubric-service";
import {Rubric} from "../../models/rubric";
import {Input} from "angular2/core";
import {Criteria} from "../../models/criteria";
import {Descriptor} from "../../models/descriptor";
import {RubricDescriptorEditorComponent} from './rubric-editor-descriptor';


@Component({
    selector: '[myCr]',
    templateUrl: './app/components/rubric/rubric-editor-criteria-form.html',
    directives: [CORE_DIRECTIVES,ROUTER_DIRECTIVES, FORM_DIRECTIVES, RubricDescriptorEditorComponent]
})

export class RubricCriteriaEditorComponent {
    @Input('myCr') crit: Criteria;
    //
    constructor (public rubricService: RubricService, public router:Router, params: RouteParams ){
        console.log('params.get("id") : ', params.get('id'));
        if (params.get('id') != null) {
           // this.crit.levels = new Array[4];
        } else {
            console.log('Entered RubricEditor add mode');
            //this.crit = new Criteria(null);
            //this.crit.levels = new Array[4];
        }
    }

}

View Tempalte：

<td>
    <button class="close removeCriterion" >&times;</button>
</td>
<td>
    <textarea class="form-control" rows="4" placeholder="Criterion Description"
              #description="ngForm"
              [(ngModel)]="crit.description"
              ngControl="description"
    ></textarea>
    <input style="margin-top: 10px" type="text" class="form-control" placeholder="Weight"
           #weight="ngForm"
           [(ngModel)]="crit.weight"
           ngControl="weight"
    />
</td>
<td *ngFor="#lev of crit.levels" [myDr]="lev"></td>

Answer 1

这似乎是TypeScript编译器中的一个错误。

我设法通过在一个语句中导入required而不是使用多个import语句来解决它。

import { Component, View, Input, Output } from 'angular2/core';

使用调试器时，它显示core_1.Input存在，但core_2.Input不存在。

Angular2嵌套组件：错误：core_2.Input不是函数错误加载http：// localhost：9080 / app / boot.js

1 个答案: