Question

我一直在关注AngularJs 2.0教程，但我一直试图导入子组件。我对角度很新，所以这可能是一个非常业余的错误。

我有这个模块，直到我添加了NavigationComponent指令和引用：

/// <reference path="Navigation.ts" />
/// <reference path="../angular2/angular2.d.ts" />
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import { NavigationComponent } from './Navigation'

// Annotation section
@Component({
  selector: 'roadmap'
})
@View({
  templateUrl : 'roadmap.html',
  directives: [NavigationComponent, NgFor]
})
// Component controller
export class Roadmap {

  herName: string;
  content: string
  names: Array<string>;

  constructor() {

    this.herName = 'Jessica';
    this.content = "test content";
    this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];

  }

  addName(name: string){
    this.names.push(name);
  }

  doneTyping($event) {
    if($event.which === 13) {
      this.addName($event.target.value);
      $event.target.value = null;
    }
  }
}

bootstrap(Roadmap)

我将NavigationComponent定义为：

/// <reference path="../angular2/angular2.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'navigation'
})
@View({
  template: `<h1> tester </h1>`
})

export class NavigationComponent {

  message: string;

  constructor() {
    this.message = "I'm the navigation";
  }

}

我无法使import语句正确无误。我在同一文件夹中有Roadmap.ts和NavigationComponent.ts。

我看到的错误没有传达任何有用的信息：

Uncaught ReferenceError: System is not defined

有什么建议吗？

Answer 1

我想您在index.html使用来自互联网的脚本并且有问题可以访问它们，因为我现在遇到同样的问题。我建议用本地文件替换它。

在此解决方案中，我使用的是jspm包管理器（您可以通过npm install -g jspm安装它）。

在项目根文件夹中运行命令：

jspm init

您可以保留jspm的默认配置 - 只需按Enter键即可。现在运行：

jspm install traceur-runtime

您应该在jspm_packages文件夹中包含所有必需文件。现在从index.html

替换此（或类似）行

<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>

用这个：

<script src="jspm_packages/github/jmcriffey/bower-traceur-runtime@0.0.88/traceur-runtime.js"></script>
<script src="jspm_packages/system.js"></script>

编辑：现在看起来一切正常 - 文件再次在线。如果将来出现问题，请记得检查jspm中的文件版本，并从此答案中替换过时的文件。

Angular 2.0 - 如何导入子模块？

1 个答案: