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的值也相應修改了。