Angular 如何将组件附着到角度方向的根组件？

我制作了一个

courses.component.ts

组件，现在我想添加它

app.component.ts

，但它不起作用。为什么?

在app.component.ts中：

import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component';

@Component({
    selector: 'my-app',
    template: '<h1>{{ mainheading }}</h1><courses></courses>',
})

export class AppComponent {
    mainheading = "My Angular App";
}

import {Component} from 'angular2/core';
import {CourseService} from './course.service';

@Component({
    selector:'courses',
    template: `<h2>Courses</h2> {{title}}
    <ul> 
    <li *ngFor="#c of courses">{{c}} </li>
    </ul>`
    providers: [CourseService]
})

export class CoursesComponent {
    title: string ="The title of courses";
    courses; 

    constructor (courseService:CourseService){
        this.courses = courseService.getCourses(); 
    }
}

---

为什么我的代码不起作用？我在Sublime文本3中使用了Angular。

您能详细介绍一下“不工作”吗？你把新组件包括在适当的模块中了吗？@jornsharpe我已经把所有事情都做好了。那么它一定能工作了。你在抱怨它不是，所以很明显你没有。打个招呼。请注意，您似乎至少缺少一个逗号，这应该是某个地方的一个错误。@jornsharpe只要我在component decorator中添加

指令：[CoursesComponent]

，它就会开始工作。为什么会这样。因为您显然没有在模块中提供您的组件，尽管您在回复我的第一条评论时声明了这一点。

export class CourseService {
    getCourses():string[]{
        return ["Course1","Course2","Course3"];
    }
}