typescript/eS5-ES6 模块没有被调用

Question

我不知道哪里出了问题，因为我是 Angular2、typescript、es5 和 es6 的新手。看看plnkr。我不明白为什么我的 FirstComponent 没有被写入 first.ts 文件中。

我有以下实现。

app.ts

import {bootstrap, Component, CORE_DIRECTIVES} from 'angular2/angular2'
import {FirstComponent} from 'first'    // please explain what should be here. 'first','./first' or something else?
@Component({
  selector: 'my-app',

 template:"<div>{{title}}</div>"
})
class AppComponent { 
  obj:Array<string>;
  constructor(){
    this.title="Hello Angular2 !";
  }
}

bootstrap(AppComponent);

first.ts

export class FirstComponent{
   constructor() {
    console.log("First Component being called");
  }
}

config.js

注意：我不明白添加 config.js 文件的总体作用。

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things

  //packages defines our app package
   packages: {
    app: {
      main: 'app.ts',
      defaultExtension: 'ts'
    },
    services: {
      defaultExtension: 'ts'
    },
  }
});

Answer 1

为了能够创建和使用 FirstComponent，您必须装饰它。这意味着您在 FirstComponent class 上方添加 @Component，它将告诉 Angular 向其添加元数据。

first.ts:

@Component({
  selector: <f-comp></f-comp>, // Here specify a CSS selector used to create the FirstComponent component.
  template: `
    <p>This is the first component</p>
  `
})
export class FirstComponent {
  ...
}

要创建，您必须在 app.ts 文件中调用 FirstComponent。

app.ts:

@Component({
  directive: [ FirstComponent ], // Here you tell Angular that you are going to use FirstComponent.
  ...
  template: `
    ...
    // here you must put the FirstComponent CSS selector --> <f-comp></f-comp>
  `
})

我创建了一个 plnkr，我在其中解释了每个步骤及其工作原理。 http://plnkr.co/edit/CKZ2l9WqMljXM1FO0IoF?p=preview

typescript/eS5-ES6 模块没有被调用

typescript/eS5-ES6 module is not getting called

ecmascript-5

typescript

ecmascript-6

angular