Angular 2.0-如何导入子模块?

BentOnCoding

我一直在关注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

有什么建议吗?

haz111

我想您正在使用Internet中的脚本,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/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>

有了这个:

<script src="jspm_packages/github/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="jspm_packages/system.js"></script>

编辑:看起来现在一切都很好-文件又重新联机。如果将来还会出现问题,请记住从jspm检查文件的版本,并从此答案中替换过时的文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章