Angular2 嵌套组件: 错误: core_2.输入不是函数 加载 http://localhost:9080/ap

Question

我有3个组件。1. 评分量规编辑器2. 评分标准编辑器3. 量规描述符编辑器

评分量规编辑器是加载到路由器插座中的主要组件

。 评分量规编辑器加载需要输入对象的量规标准编辑器，而评分量规标准编辑器加载需要输入对象的量规描述符编辑器。

但这，行不通。 我得到了核心2。输入不是评分量规描述符编辑器中@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>

对于我的评分标准编辑器：

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];
        }
    }
}

视图临时：

<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编译器中的一个错误。

我设法通过在一个语句中导入所需的语句而不是使用多个导入语句来解决此问题。

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

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