打字稿/ 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，您必须装饰它。这意味着您将@Component添加到FirstComponent类之上，它将告诉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