Angular快速上手--为应用外壳创建组件05

0、前言

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

创建英雄列表组件

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

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

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

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

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

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

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

2. templateUrl— 组件模板文件的位置。

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

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

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

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

添加 hero 属性

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

在heroes.component.ts中添加以下代码：

hero = 'Windstorm'

显示效果

 

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

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

{{hero}}

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

<h1>{{title}}</h1>
<app-heroes></app-heroes>

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

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