Angular2 inject a Component into a Component

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>