AngularJs2 构建简单的英雄编辑器
参考上一篇文章的步骤，重新把相关环境准备、目录结构走一遍。
这一次我们要开始创建真正的Angularjs项目了。
显示我们的英雄
我们要在应用中显示英雄数据
我们来为 AppComponent 添加两个属性： title 属性表示应用的名字，而 hero 属性表示一个名叫“ Windstorm ”的英雄。
export class AppComponent { title = 'Tour of Heroes'; hero = 'Windstorm'; }
现在，我们为这些新属性建立数据绑定，以更新 @Component 装饰器中指定的模板
template: '
{{title}}
{{hero}} details!
'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: 1, name: 'Windstorm' };
我们把 hero 从一个字符串换成了对象，所以也得更新模板中的绑定表达式，来引用 hero 的 name 属性。
template: '{{title}}
{{hero.name}} details!
'
添加更多的 HTML
能显示名字虽然不错，但我们还想看到这位英雄的所有属性。 我们将添加一个 我们可以通过字符串加法来制作更可读的模板，但这样仍然太难看了——难于阅读，容易拼错。 这样不行！我们要借助 ES2015 和 TypeScript 提供的模板字符串来保持清爽。 把模板的双引号改成反引号，并且让 template:` 我们想在一个文本框中编辑英雄的名字。 把英雄的名字从单纯的 在浏览器中，我们看到英雄的名字显示成一个 我们的期望是：在 在我们让 表单输入 支持双向数据绑定之前，我们得先导入 我们的模块app.module.ts就成了 接下来更新模板，加入用于双向绑定的内置指令 把 浏览器刷新。又见到我们的英雄了。我们可以编辑英雄的名字，也能看到这个改动立刻体现在 好了，在终端中输入 npm start尽情浏览吧。 回顾一下我们刚才的操作； 我们从创建对象开始，再到在模板中显示对象的属性。以及双休绑定，关键字（ngModel），注意要写完整[(ngModel)].id 属性，用另一个 name 属性。
template: '
{{title}}
{{hero.name}} details!
多行模板字符串
， 和 {{title}}
{{hero.name}} details!
编辑我们的英雄
重构成 和 元素的组合，就像下面这样：template:`
{{title}}
{{hero.name}} details!
文本框。但看起来还是有点不太对劲。 当修改名字时，我们的改动并没有反映到 中。使用单向数据绑定，我们没法实现所期望的这种行为。双向绑定
中显示英雄的名字，修改它，并且在所有绑定到英雄名字的地方看到这些修改。 简而言之，我们需要双向数据绑定。FormsModule 模块。 只要把它添加到 NgModule 装饰器的 imports 数组中就可以了，该数组是应用中用到的外部模块列表。 这样我们就引入了表单包，其中包含了 ngModel 。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 。 替换为下列 HTML "hero.name" placeholder="name">
中。相关