AngularJs2 构建简单的英雄编辑器

参考上一篇文章的步骤，重新把相关环境准备、目录结构走一遍。

这一次我们要开始创建真正的Angularjs项目了。

显示我们的英雄

我们要在应用中显示英雄数据

我们来为 AppComponent 添加两个属性： title 属性表示应用的名字，而 hero 属性表示一个名叫“ Windstorm ”的英雄。

export class AppComponent {

  title = 'Tour of Heroes';

  hero = 'Windstorm';

}

现在，我们为这些新属性建立数据绑定，以更新 @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;

}

现在，有了一个 Hero 类，我们就要把组件 hero 属性的类型换成 Hero 了。然后以 1 为 id 、以“ Windstorm ”为名字，初始化它。

在AppComponent类中添加：

hero: Hero = {

  id: ,

  name: 'Windstorm'

};

我们把 hero 从一个字符串换成了对象，所以也得更新模板中的绑定表达式，来引用 hero 的 name 属性。

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

添加更多的 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>'

多行模板字符串

我们可以通过字符串加法来制作更可读的模板，但这样仍然太难看了——难于阅读，容易拼错。这样不行！我们要借助 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>

  `

在浏览器中，我们看到英雄的名字显示成一个 <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 { }

接下来更新模板，加入用于双向绑定的内置指令 ngModel 。

把 <input> 替换为下列 HTML

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

浏览器刷新。又见到我们的英雄了。我们可以编辑英雄的名字，也能看到这个改动立刻体现在 <h2> 中。

好了，在终端中输入 npm start尽情浏览吧。

回顾一下我们刚才的操作；

我们从创建对象开始，再到在模板中显示对象的属性。以及双休绑定，关键字（ngModel），注意要写完整[(ngModel)].