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>