Angular 2.0 - 如何导入子模块？

Question

我一直在关注 AngularJs 2.0 教程，但我一直在尝试导入子组件。一般来说，我是 angular 的新手，所以这可能是一个非常业余的错误。

我有这个模块，在我添加 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";
  }

}

我无法正确导入语句。我在同一文件夹中同时拥有 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 - 如何导入子模块？

Angular 2.0 - How to import a child module?

javascript

angular