Angular6学习笔记4：创建一个新的Angular组件，并将它展示出来

创建一个新的Angular组件，并将它展示出来

继学习笔记3以后，创建的应用程序有了标题，现在要创建一个新的组件来显示hero的信息，并将它们展示出来。

1.新建一个新的Angular组件

在命令行中(注意要切换都项目路径下，如使用Webstorm在下方的Terminal中直接输入命令即可)使用 Angular CLI 创建一个名为 heroes 的新组件。

ng generate component heroes

执行完以后会提示：

这个过程中：CLI 创建了一个新的文件夹 src/app/heroes/，并生成了 HeroesComponent 的三个文件。

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

打开HeroesComponent 的类文件（heroes.component.ts）：

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

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

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

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

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

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

2.在新建的组件中添加一个属性

• 在HeroesComponent的类文件（heroes.component.ts）中添加一个属性

hero = 'Windstorm';

• 在HeroesComponent的模板文件（heroes.component.html）中展示这个属性

{{hero}}

• 显示 HeroesComponent 视图

在heroes组件的类文件（heroes.component.ts）中selector（组件的选择器）中的：“app-heroes”就是这个heroes组件的元素选择器，所以显示heroes组件，将<app-heroes> 元素添加到 AppComponent 的模板文件（app.component.html）中就可以了。

在src/app/app.component.html中：

1. <h1>{{title}}</h1>

2. <app-heroes></app-heroes>

保存以后，浏览器自动刷新，出现一下界面：

3.创建Hero类

切换到src/app，命令行中(注意要切换都项目路径下，如使用Webstorm在下方的Terminal中直接输入命令即可)使用 Angular CLI 创建一个名为 hero 的新类。

1. wjydeMacBook-Pro:app wjy$ ng generate class hero

2. CREATE src/app/hero.ts (22 bytes)

3.  

这样在src/app目录下，就会有一个Hero类，在Hero类中新增两个属性

1. export class Hero {

2. id: number;

3. name: string;

4. }

切换到HeroesComponent 类中，导入这个Hero类

import {Hero} from '../hero';

将Heroes组件的 hero 属性的类型重构为 Hero。 然后以 1 为 id、以 “Windstorm” 为名字初始化它。

1. hero: Hero = {

2. id: 1,

3. name: 'Windstorm',

4. };

此时，保存以后，页面就会显示的不正常，因为原来的hero属性是string型，现在是Object型。

处理不正常的显示问题

修改HeroesComponent模板中的绑定，以显示英雄的名字，并在详情中显示 id 和 name，

1. <h2>{{hero.name}} Details</h2>

2. <div><span>id: </span>{{hero.id}}</div>

3. <div><span>name: </span>{{hero.name}}</div>

保存以后，浏览器刷新就显示正常了；