Angular --英雄编辑器

前言

我们之前已经将环境和框架搭好，那么我们现在需要显示一下我们英雄的人员，这里我们将讲到装饰器、管道、双向绑定等一些讲解。

制作组件

1. 首先我们需要创建一个新的组件 : 使用Angular CLI创建名为‘heroes’

		ng generate component heroes

显示的ts文件结果，其他html模板和css给出的模板都可以删掉。

2. 然后 我们为了添加更多的人名，我们建立一个类来放置人名：

		// 在src/app里面添加一个hero.ts类，请输入：
		
		export class Hero {
		  id: number;
		  name: string;
		}

3. 我们添加一个hero属性，用来显示一个名为“Windstorm”英雄

		// 在heroes.component.ts中的export里面输入：
		
		export class HeroesComponent implements OnInit {
		  hero: Hero = {
		  
		    id: 1,
		    name: 'Windstorm'
		    
		  };

4. 其次我们显示 一下这个英雄：在heroes.compoent.html中添加hero属性的数据绑定，删除html页中自动生成的所有东西。

		//绑定表达式中upperase位于管道操作符（|）的右边，
		//用来调用内置管道UppercasePipe。
		
		//管道 是格式化字符串、金额、日期、和其他显示数据的好办法。 
		//可以自行创建或者用提供的。
		<h2>{{hero.name | uppercase}} Details</h2>
		
		<div><span>id: </span>{{hero.id}}</div>
		
		//[(ngModel)] 是Angular的双向数据绑定语法。 
		//这里把hero.name属性绑定到了THML的textbox元素上面，
		//以便数据流可以双向流动：hero.name属性流动到textbox，
		//并且从textbox流回到hero.name。
		<div>
		    <label>name:
		        <input [(ngModel)]="hero.name" placeholder="name">
		    </label>
		</div>

5. 最后我们还需要将这个添加的组件添加到APPComponent的模板中去：

		//在app.component.html中输入：
		
		<h1>{{title}}</h1>
		<app-heroes></app-heroes>

注意：问题解决办法：这个时候由于我们添加了双向绑定[(ngModel)] ,所以我们需要导入FormsModule:

		// 在app.modules.ts中最上面添加此代码：
		
		import { FormsModule} from '@angular/forms'; //<--NgModel lives here
		
		
		//在此页面中，imports中添加：
		imports: [
		  BrowserModule,
		  FormsModule
		],

备注：其中在heroes组件中的ts文件添加我们要显示的数据内容，然后在html页中设定如何显示，并且需要在app.compent.html中添加我们要显示的组件即可，至于我们添加的类没有太大关系，但是最后我们需要将这个绑定需要导入FormModule。

结果