Angular CLI 創建一個名爲 heroes 的新組件。
ng generate component heroes
@Component 是個裝飾器函數，用於爲該組件指定 Angular 所需的元數據。
CLI 自動生成了三個元數據屬性：
1. selector— 組件的選擇器（CSS 元素選擇器）
2. templateUrl— 組件模板文件的位置。
3. styleUrls— 組件私有 CSS 樣式表文件的位置。
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
// ngOnInit() 是一個生命週期鉤子，
// Angular 在創建完組件後很快就會調用 ngOnInit()。這裏是放置初始化邏輯的好地方。
export class HeroesComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
添加 hero 屬性
heroes.component.ts (hero property)
content_copyhero = 'Windstorm';
創建 Hero 類
export interface Hero { id: number; name: string; }
使用 UppercasePipe 進行格式化
<h2>{{hero.name | uppercase}} Details</h2>
綁定表達式中的 uppercase 位於管道操作符（ | ）的右邊，用來調用內置管道 UppercasePipe。
管道 是格式化字符串、金額、日期和其它顯示數據的好辦法。 Angular 發佈了一些內置管道，而且你還可以創建自己的管道。
編輯英雄名字
AppModule
導入 FormsModule
打開 AppModule (app.module.ts) 並從 @angular/forms 庫中導入 FormsModule 符號。
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
然後把 FormsModule 添加到 @NgModule 元數據的 imports 數組中，這裏是該應用所需外部模塊的列表。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';// <-- NgModel lives here
@NgModule({
declarations: [
AppComponent,
HeroesComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
小結
• 你使用 CLI 創建了第二個組件 HeroesComponent。
• 你把 HeroesComponent 添加到了殼組件 AppComponent 中，以便顯示它。
• 你使用 UppercasePipe 來格式化英雄的名字。
• 你用 ngModel 指令實現了雙向數據綁定。
• 你知道了 AppModule。
• 你把 FormsModule 導入了 AppModule，以便 Angular 能識別並應用 ngModel 指令。
• 你知道了把組件聲明到 AppModule 是很重要的，並認識到 CLI 會自動幫你聲明它。
顯示這些英雄
使用 *ngFor 列出這些英雄
打開 HeroesComponent 的模板文件，並做如下修改：
• 在頂部添加 <h2>，
• 然後添加表示無序列表的 HTML 元素（<ul>）
• 在 <ul> 中插入一個 <li> 元素，以顯示單個 hero 的屬性。
• 點綴上一些 CSS 類（稍後你還會添加更多 CSS 樣式）。
做完之後應該是這樣的：
<li *ngFor="let hero of heroes">
*ngFor 是一個 Angular 的複寫器（repeater）指令。 它會爲列表中的每項數據複寫它的宿主元素。
這個例子中涉及的語法如下：
• <li> 就是 *ngFor 的宿主元素。
• heroes 就是來自 HeroesComponent 類的列表。
• 當依次遍歷這個列表時，hero 會爲每個迭代保存當前的英雄對象。
不要忘了 ngFor 前面的星號（*），它是該語法中的關鍵部分。
主從結構
當用戶在主列表中點擊一個英雄時，該組件應該在頁面底部顯示所選英雄的詳情。
在本節，你將監聽英雄條目的點擊事件，並更新英雄的詳情。
添加 click 事件綁定
再往 <li> 元素上插入一句點擊事件的綁定代碼：
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
這是 Angular 事件綁定 語法的例子。
click 外面的圓括號會讓 Angular 監聽這個 <li> 元素的 click 事件。 當用戶點擊 <li> 時，Angular 就會執行表達式 onSelect(hero)。
下一部分，會在 HeroesComponent 上定義一個 onSelect() 方法，用來顯示 *ngFor 表達式所定義的那個英雄（hero）。
小結
• 英雄指南應用在一個主從視圖中顯示了英雄列表。
• 用戶可以選擇一個英雄，並查看該英雄的詳情。
• 你使用 *ngFor 顯示了一個列表。
• 你使用 *ngIf 來根據條件包含或排除了一段 HTML。
• 你可以用 class 綁定來切換 CSS 的樣式類。
3製作 HeroDetailComponent
使用 Angular CLI 生成一個名叫 hero-detail 的新組件。
ng generate component hero-detail
添加 @Input() hero 屬性
HeroDetailComponent 模板中綁定了組件中的 hero 屬性，它的類型是 Hero。
打開 HeroDetailComponent 類文件，並導入 Hero 符號。
小結
• 你創建了一個獨立的、可複用的 HeroDetailComponent 組件。
• 你用屬性綁定語法來讓父組件 HeroesComponent 可以控制子組件 HeroDetailComponent。
• 你用 @Input 裝飾器來讓 hero 屬性可以在外部的 HeroesComponent 中綁定。