应用的界面是由各种不同的组件组合在一起构成的，下面我们先去创建一个组件.. 在终端，项目所在目录的下面，执行 ng generate 这回生成一个 component ，组件，名字是 modules/post ， 执行一下这个命令。

命令会给我们生成一个叫 post 组件，放在了 src.. app，modules，post 目录的下面， 这里的 post.component.ts 是组件的定义， post.component.spec.ts 是组件的测试文件。 post.component.html 是组件的界面， post.component.css 是这个组件需要的样式文件。

另外命令还自动更新了一下 post.module。

回到项目，先打开 post.module，文件的一开始导入了刚才我们用命令创建的 PostComponent 组件，然后在这个模块的 declarations 里面，列出了这个模块里包含的一些资源， 这里会出现 PostComponent 组件。

下面打开这个组件看一下， 组件是一个类，这个类需要使用 @Component 装饰器装饰， 给它一个对象可以配置这个组件相关的东西， selector 是 app-post ，templateUrl 是组件的模板文件的位置， styleUrls 是组件的样式文件的位置。

打开 post.component.html ， 它是组件的模板文件， 现在这个模板文件里有一个段落标签，文字是 post works。

然后打开 app.component.html 文件，它是 AppComponent 组件的模板文件，在它里面，可以用一下 PostComponent，添加一组 app-post， 因为 PostComponent 设置的 selector 就是这个 app-post。

回到浏览器预览一下 ... 现在界面上并没有显示 PostComponent 组件里的东西， 控制台上会出现一些错误 ... 提示 app-post is not a known element。

如果要在 AppComponent 组件里使用 PostComponent ... 我们还需要做点设置，打开 PostComponent 所在的模块，PostModule。

在这个模块里，需要添加一个 exports， 导出这个模块提供的东西， 因为在其它的地方我们要使用这个模块里PostComponent ，所以需要把它导出来。

再打开 AppModule， 在这个模块的组件里要使用 PostModule 模块里导出的组件，所以在这个模块的 imports 里面，需要导入 PostModule， 输入 PostModule ... 按一下 tab ... 编辑器会自动在文件顶部导入这个模块， 如果没有自动导入，你需要手工添加这行代码。

再回到浏览器预览一下，如果你发现还没有正常显示组件内容的话，可以回到终端，先停止一下项目的开发服务，然后重新再运行一下。

现在你会发现，界面上会显示一个 post works，这个文字就是 PostComponent 组件要显示的内容。