AngularJs2 構建簡單的英雄編輯器

標籤：angularjs   .com   通過   雙向   分享   ret   com   export   show   

參考上一篇文章的步驟，重新把相關環境準備、目錄結構走一遍。

    這一次我們要開始建立真正的Angularjs項目了。    

顯示我們的英雄

我們要在應用中顯示英雄資料

我們來為 AppComponent 添加兩個屬性： title 屬性工作表示應用的名字，而 hero 屬性工作表示一個名叫“ Windstorm ”的英雄。

export class AppComponent {  title = ‘Tour of Heroes‘;  hero = ‘Windstorm‘;}

View Code

現在，我們為這些新屬性建立資料繫結，以更新 @Component 裝飾器中指定的模板

template: ‘<h1>{{title}}</h1><h2>{{hero}} details!</h2>‘

Hero 對象

此時此刻，我們的英雄還只有一個名字。顯然，它 / 她應該有更多屬性。 讓我們把 hero 從一個字串字面量換成一個類。

建立一個 Hero 類，它具有 id 和 name 屬性。 現在，把下列代碼放在 app.component.ts 的頂部，僅次於 import 語句。

在app.component.ts中添加代碼以建立Hero類。

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

View Code

現在，有了一個 Hero 類，我們就要把組件 hero 屬性的類型換成 Hero 了。 然後以 1 為 id 、以“ Windstorm ”為名字，初始化它。

在AppComponent類中添加：

hero: Hero = {  id: 1,  name: ‘Windstorm‘};

View Code

我們把 hero 從一個字串換成了對象，所以也得更新模板中的綁定運算式，來引用 hero 的 name 屬性。

template: ‘<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>‘

View Code添加更多的 HTML

能顯示名字雖然不錯，但我們還想看到這位英雄的所有屬性。 我們將添加一個 <div> 來顯示英雄的 id 屬性，用另一個 <div> 來顯示英雄的 name 屬性。

template: ‘<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>‘

View Code多行模板字串

我們可以通過字串加法來製作更可讀的模板，但這樣仍然太難看了——難於閱讀，容易拼錯。 這樣不行！我們要藉助 ES2015 和 TypeScript 提供的模板字串來保持清爽。

把模板的雙引號改成反引號，並且讓 <h1> ， <h2> 和 <div> 標籤各佔一行。

 template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> ` 

編輯我們的英雄

我們想在一個文字框中編輯英雄的名字。

把英雄的名字從單純的 <label> 重構成 <label> 和 <input> 元素的組合，就像下面這樣：

template:`  <h1>{{title}}</h1>  <h2>{{hero.name}} details!</h2>  <div><label>id: </label>{{hero.id}}</div>  <div>    <label>name: </label>    <input value="{{hero.name}}" placeholder="name">  </div>  `

View Code

在瀏覽器中，我們看到英雄的名字顯示成一個 <input> 文字框。但看起來還是有點不太對勁。 當修改名字時，我們的改動並沒有反映到 <h2> 中。使用單向資料繫結，我們沒法實現所期望的這種行為。

雙向繫結

我們的期望是：在 <input> 中顯示英雄的名字，修改它，並且在所有綁定到英雄名字的地方看到這些修改。 簡而言之，我們需要雙向資料繫結。

在我們讓 表單輸入 支援雙向資料繫結之前，我們得先匯入 FormsModule 模組。 只要把它添加到 NgModule 裝飾器的 imports 數組中就可以了，該數組是應用中用到的外部模組列表。 這樣我們就引入了表單包，其中包含了 ngModel 。

我們的模組app.module.ts就成了

import { NgModule }      from ‘@angular/core‘;import { BrowserModule } from ‘@angular/platform-browser‘;import { FormsModule }   from ‘@angular/forms‘;import { AppComponent }  from ‘./app.component‘;@NgModule({  imports: [    BrowserModule,    FormsModule  ],  declarations: [    AppComponent  ],  bootstrap: [ AppComponent ]})export class AppModule { }

View Code

接下來更新模板，加入用於雙向繫結的內建指令 ngModel 。

把 <input> 替換為下列 HTML

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

瀏覽器重新整理。又見到我們的英雄了。我們可以編輯英雄的名字，也能看到這個改動立刻體現在 <h2> 中。

好了，在終端中輸入 npm start盡情瀏覽吧。

回顧一下我們剛才的操作；

我們從建立對象開始，再到在模板中顯示對象的屬性。以及雙休綁定，關鍵字（ngModel），注意要寫完整[(ngModel)].

AngularJs2 構建簡單的英雄編輯器