Angular(4) - 英雄编辑器 - 官方教程英雄指南之添加英雄组件 （详细解说）

1 创建英雄组件

ng generate component heroes

2 查看组件架构 ， 从下图可以很清楚的看出，系统自动生成了4个文件， 修改了1个文件。

3 修改heroes.ts如下图， 增加一个暴露的属性 hero= 'windstorm'

export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  hero = 'Windstorm';

}

4 修改 heroes.html

{{hero}}

5 如何调用 app.component.html, 请留意，这里并不是 <heroes></heroes> 而是 <app-heroes></app-heroes> 。 所以 ，这就是模板语法的约定，必须要加前缀，我想是因为可能还在类似app.conponent的顶层组件。

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

6 app.module.ts 大家可以看到，cli会自行在最后增加一条import语句

import { HeroesComponent } from './heroes/heroes.component';

7 增加hero实体类，在 src/app 文件夹中为 Hero 类创建一个文件，并添加 id 和 name 属性。

export interface Hero {
  id: number;
  name: string;
}

8 使用实体类, 我们在Heroes的组件中暴露一个Hero对象，而并不是之前的一个变量。 hero: Hero

src/app/heroes/heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

9 修改英雄模板代码, 直接使用Hero对象的属性，这里可以清楚的看到对象是可以直接使用的，在ng

heroes.component.html (HeroesComponent's template)

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

10 使用 UppercasePipe 进行格式化, 大家可以看到，英雄的名字变大写了 这就是管道的作用，后面我们会单独再写一篇关于管道的描述。

<h2>{{hero.name | uppercase}} Details</h2>