AngularJs2 构建简单的英雄编辑器

Posted 2020-08-19 不是玩的

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

    这一次我们要开始创建真正的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)].