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

Question

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

rubric 编辑器是加载在路由器插座中的主要组件。量规编辑器加载需要输入对象的量规标准编辑器，量规标准编辑器加载需要输入对象的量规描述符编辑器。

但这不起作用。我得到 core2.Input is not a function error on the @Input line in the @Input line in the rubric descriptor editor。 （错误阻止 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];
        }
    }

}

视图模板：

<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不存在。