1 add clock.es6 file
import {Component, Template, bootstrap} from ‘angular2/angular2‘;
@Component({
selector:‘clock‘
})
@Template({
inline:‘<h1>{{name}}</h1>‘
})
export class Clock{
constructor(){
this.name = ‘Clock‘
}
}
ps:remember to export the class and add to the system path
System.paths = {
‘angular2/*‘: ‘angular2/*.js‘,
‘rtts-assert/*‘: ‘rtts-assert/*.js‘,
‘app‘: ‘app‘,
‘clock‘:‘clock‘
};
System.import(‘app‘);
2 add the component to your component
import {Component, Template, bootstrap, For} from ‘angular2/angular2‘;
import {Clock} from ‘./clock‘;
@Component({
selector: ‘my-app‘
})
@Template({
inline:‘<h1>{{myName}}</h1>‘ +
‘<input type="text" #newname (keyup)/>‘ +
‘<h3 [style.color]="newname.value">{{newname.value}}</h3>‘ +
‘<button (click)="onClick(newname.value)">change value</button>‘ +
‘<clock></clock>‘,
directives:[Clock]
})
class MyApp {
constructor() {
this.myName = ‘Jackey‘;
}
onClick(newName){
console.log(newName);
}
}
bootstrap(MyApp);
remember : 1 import the profile 2 directives:[Clock] 3 add to the html <clock></clock>
inject a Component into a Component
原文：http://www.cnblogs.com/lihaozhou/p/4662950.html