0、前言

从上一篇文章中我们可以了解到，应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。

创建英雄列表组件

使用 CLI 创建一个名为的新组件，首先我们要知道在什么项目之下创建组件。

cd angular-tour-of-heroes
ng generate component heroes

利用dos的dir命令就可以知道已经创建了在-tour-of-项目下，CLI 创建了一个新的文件夹src/app//，并生成了的三个文件

你要从 核心库中导入符号，并为组件类加上@装饰器。

@是个装饰器函数，用于为该组件指定 所需的元数据。

CLI 自动生成了三个元数据属性：

— 组件的选择器（CSS 元素选择器）

— 组件模板文件的位置。

— 组件私有 CSS 样式表文件的位置。

CSS 元素选择器app-用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。

是一个生命周期钩子， 在创建完组件后很快就会调用。这里是放置初始化逻辑的好地方。

始终要这个组件类，以便在其它地方（比如）导入它。

添加hero属性

往中添加一个hero属性，用来表示一个名叫 “” 的英雄。

在.ts中添加以下代码：

hero = 'Windstorm'

显示效果

打开模板文件.html。删除 CLI 自动生成的默认内容，改为到hero属性的数据绑定。

在.html文件中写入以下代码：

{{hero}}

在.html文件中写入以下代码：

{{title}}

如果 CLI 的ng serve命令仍在运行，浏览器就会自动刷新，并且同时显示出应用的标题和英雄的名字。

别忘了，app-就是的元素选择器。 所以，只要把元素添加到的模板文件中就可以了，就放在标题下方。