Angular2 - 構建新的Component

在入門學習中我們已經有了一個簡單的Angular2完成App，今天我們將要構建一個新的Component，並且一些基本信息。

為了代碼的規范。當我們使用CLI命令的時候，CLI會自動創建一個文件夾里面只包含一個component(ts, css , html )

接下來我們用命令行 mkdir 創建一個文件夾存放我們新的component

1. 進去src/app 文件夾
2. 鍵入命令mkdir heroes ， 文件夾heroes將會創建到src/app文件夾在
3. 使用CLI命令 ng generate component heroes 創建新的component。

如果你是手動創建component的話。你需要在app.component.ts 手動導入新建的component，並且在NgModule中的declarations引入Component。如果你使用的是CLI命令就不會有這樣的問題。在CLI創建新的Component，會自動添加到app.component.ts  和 declarations中。

在這里我遇到一個問題，剛開始我把heroes文件夾創建在了src同級的目錄。當我使用CLI命令創建新的component，告訴我不能找到NgModule。

一個空的Component 已經創建好了。我們就可以在里面添加東西了，下面有一些東西需要注意：

• 我們可以發現CLI 給我們 創建的ts文件中有一個ngOnInit的方法（OnInit 鈎子），在這個方法會做兩件事情。

1. 1. 執行初始化邏輯
   2. 當設置完屬性之后。對組件進行准備

　　　　今后我們還會提交與之相關的其他的鈎子，(OnDestroy , OnChange 等，在這里我們就不做過多的解釋).

• 在這里需要強調的是。每一個Component都需要導出（export）已方便其他的地方調用。
• 可以直接在class前面加 export 關鍵字
• 也可以先創建class ，在文件的末尾export component

到這里我遇到了一些問題， 當我添加新的Component 到index.html里面 ，信息並沒有正確顯示。按理說這個是CLI自動生成，難道是app的入口是index.html里面的app-root， 那我換成我新加的不就可以了嘛。可是這條路沒有走通。 為什么不起作用勒。一段時間的分析和研究。我找到了答案。

1. 從angular.json 文件我們發現入口確實是index.html , ts 則是main.ts
2. 進去main.ts 查看。platformBrowser 導入的是AppModule
3. 接着順藤摸瓜，我們看到app.module.ts 里面的bootstrap（引導程序） 的參數是AppComponent （這個component的selector 就是app-root）。
4. 我們試着把bootstrap的參數改成我們新加的component。
5. 嗯。沒錯。他工作了。我們看到了新的component的信息。

但是按照結構我還是保留了app-root，然后在app.component.html 中添加新的component。

這樣Component就算創建好了。我們需要給他添加一些顯示信息。

要顯示什么勒？既然我們用的是基於TypeScript的Angular2，我們就可以用TypeScript的新特性來儲存信息。

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

在這里我們創建了Hero對象，並導出，接着我們進去heroes component。我們可以import 導入對象一邊使用。當Hero對象導入heroes.component 我們就可以創建對象並賦值。

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

  hero: Hero = {
    id: 1,
    name:'Allen'
  }

我創建了一個文件夾來存放所有的entity，你可以穿件在任何地方，只需要引入正確的路勁。

這樣我們就可以用hero（對象的名稱）在頁面上訪問我們剛剛創建的Hero對象了。

ID : {{hero.id}}<br />
Name : {{hero.name | uppercase}}

現在我們有了對象。也可以顯示在頁面是。那我們可以試着利用Angular的雙向綁定來修改hero的值了。

在頁面上新建一個input並且ngModel指向hero.name

<input [(ngModel)]="hero.name" placeholder="name">

當你加上 [(ngModel)] 之后這個應用無法工作了。打開瀏覽器的開發工具，就會在控制台中看到如下信息.

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

雖然 ngModel 是一個有效的 Angular 指令，不過它在默認情況下是不可用的。

它屬於一個可選模塊 FormsModule，你必須自行添加此模塊才能使用該指令。所以我們找到app.module.ts ，導入FormsModule。

import { FormsModule } from '@angular/forms';

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

接着我們就可以看到我們剛剛添加的input元素，並且賦值成hero.name的值。如果修改input的值hero.name的值也相應修改了。