Question

所以我一直在努力按照egghead.io的说法进行操作。但是，我似乎无法让step2工作。

我已经像这样创建了TodoInput类：

import {Component, View} from 'angular2/angular2';
@Component({
    selector: 'todo-input'
})

@View({
    template: `
        <div>This is written in the todoInput export class</div>
    `   
})

export class TodoInput{}

在helloWorld.ts中使用它，如下所示：

import{Component,View,bootstrap} from 'angular2/angular2';
import{TodoInput} from './TodoInput';

@Component({
    selector: 'hello-world'
})

@View({
    directives: [TodoInput],
    template: `
        <div>
            <h1>This is a heading!</h1>
            <todo-input/>
        </div>
    `
})

class HelloWorld{}

bootstrap(HelloWorld);

最后在index.html中使用hello-world标记，如下所示：

<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="node_modules/traceur/bin/traceur.js"></script>
        <script src="node_modules/systemjs/dist/system.js"></script>
        <script src="node_modules/angular2/bundles/angular2.min.js"></script>
    </head>
    <body>
        <hello-world></hello-world>
        <script>
            System.import('src/helloWorld.js');
        </script>
    </body>
</html>

当我尝试运行时，我收到一个错误：＆＃34; GET / src / TodoInput＆＃34;错误（404）：＆＃34;未找到＆＃34; 。我做错了什么？

我正在运行此版本的angular2：

"angular2/angular2.d.ts": {
  "commit": "78d36dd49b6b55b9fdfe61776a12bf05c8b07777"
}

Answer 1

看看这个工作实例

Demo

你需要有helloWorld文件的.ts文件扩展名。

System.import("src/helloWorld").catch(console.error.bind(console));

休息很好。看看上面给出的链接。

Answer 2

问题在于index.html文件中的语句的编写顺序。以下是我的解决方案：

<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="node_modules/traceur/bin/traceur.js"></script>
        <script src="node_modules/systemjs/dist/system.js"></script>
    </head>
    <body>
        <hello-world></hello-world>
        <script>
            System.config({defaultJSExtensions:true});    
        </script>
        <script src="node_modules/angular2/bundles/angular2.min.js"></script>
        <script>
            System.import('src/helloWorld').catch(console.error.bind(console));
        </script>
    </body>
</html>

我还添加了System.config({defaultJSExtensions:true})以使src/helloWorld（没有扩展名）工作。

无法使用angular2导入导出类

2 个答案: