angular官網實例（綜合）

第一部分：

　　（應用的“外殼”）

1、新建項目：

•  ng new mytest 

2、進入項目目錄，並啟動這個應用。

• cd mytest
• ng serve --open

3、添加一個標題

• 打開 app.component.ts            title = 'Tour of Heroes';
• 打開 app.component.html        <h1>{{title}}</h1> 

 

 

第二部分：

 （英雄編輯器）

 1、創建組件 myHeros

•  ng generate component myHeroes 

2、在 myHeroes.component.ts 中定義數組

3、在 myHeroes.component.html中使用並綁定數組的值，通過 ([ngModel]) 綁定input可修改值

  

 

 

• 補充：

我這里省略了angular官網上的把一個步驟：創建一個類 ，下面簡單補充一下創建和使用這個類：

• • 創建 Hero 類：在 src/app 文件夾中為 Hero 類創建一個文件（hero.ts），並添加 id 和 name 屬性。 export class Hero { id: number; name: string; }
  • 在要使用到 Hero 類的組件里要 import 這個 hero.ts ，比如在 myHeroes.component.ts 中；             import { HeroService } from '../hero.service';
  • 使用 Hero 類：hero: Hero = { id: 1, name: 'Windstorm' };

 

 

第三部分：

（顯示英雄列表）

1、定義一個數組 heros ，通過 *ngFor 循環，在<li>標簽上展示出單個 hero 的屬性

2、在<li>標簽上添加 click 事件綁定，通過點擊這個事件在下面展示出被點擊的這一項

3、添加 click 事件處理器，在這里給 selectedHero 賦值

•  selectedHero: any; 
•  onSelect(item){ this.selectedHero = item; } 

3、使用 *ngIf 隱藏空白的詳情

• 把要顯示的hero詳情的 HTML 包裹在一個 <div> 中， 並且為這個 div 添加 Angular 的 *ngIf 指令，把它的值設置為 selectedHero。（初始化沒有，點擊之后才有）
• 當 selectedHero 為 undefined 時，ngIf 從 DOM 中移除了英雄詳情
• 當用戶選擇一個英雄時，selectedHero 也就有了值，並且 ngIf 把英雄的詳情放回到 DOM 中。

4、給所選英雄添加樣式

• 所選英雄的顏色來自於CSS 樣式中的類 .selected
• 如果當前行的英雄和 selectedHero 相同，Angular 就會添加 CSS 類 selected，否則就會移除它。

 

 

 

第四部分：

（ 主從組件）

• 在上一節中，MyHeroesComponent 同時顯示了 "英雄列表" 和 "所選英雄的詳情" 兩部分內容。現在要把 "英雄詳情" 移入一個獨立的、可復用的 HeroDetailComponent組件中；

1、新建一個名叫 hero-detail 的新組件 ng g component hero-detail 

2、從 HeroesComponent 模板的底部把表示英雄詳情的 HTML 代碼剪切粘貼到所生成的 HeroDetailComponent 模板中

3、所粘貼的 HTML 引用了 selectedHero。 但是，新的 HeroDetailComponent 可以展示任意英雄，而不僅僅所選的。因此還要把模板中的所有 selectedHero 替換為 item。

 

•  在你從模板中剪切走代碼之前，它自己負責顯示英雄的詳情。現在它要把這個職責委托給 HeroDetailComponent 了。講 "英雄詳情" 移入子組件之后，添加 @Input() item 屬性

1、在myHeros.component.html 中添加 HeroDetail的占位符：  <app-hero-detail [item]="selectedHero"></app-hero-detail> 

2、在heros.detail.component.ts 中添加個帶有 @Input() 裝飾器的 item屬性，這個組件所做的只是通過 hero 屬性接收一個英雄對象，並顯示它。 @Input() item; 

 

• 注：（1） [item]="selectedHero"  是屬性綁定的語法，是父子組件之間通訊的重要途徑；

  （2）組件通訊有兩種方式：父到子（用@Input裝飾器）  、  子到父（用@Output裝飾器）       

    語法：   @Input() name: number; 

  

 

 

• 有哪些變化？

• 像第三部分一樣，一旦用戶點擊了一個英雄的名字，該英雄的詳情就顯示在了英雄列表下方。 現在，HeroDetailComponent 負責顯示那些詳情，而不再是 HeroesComponent。