Angular2 - 构建新的Component

在入门学习中我们已经有了一个简单的Angular2完成App，今天我们将要构建一个新的Component，并且一些基本信息。

为了代码的规范。当我们使用CLI命令的时候，CLI会自动创建一个文件夹里面只包含一个component(ts, css , html )

接下来我们用命令行 mkdir 创建一个文件夹存放我们新的component

1. 进去src/app 文件夹
2. 键入命令mkdir heroes ， 文件夹heroes将会创建到src/app文件夹在
3. 使用CLI命令 ng generate component heroes 创建新的component。

如果你是手动创建component的话。你需要在app.component.ts 手动导入新建的component，并且在NgModule中的declarations引入Component。如果你使用的是CLI命令就不会有这样的问题。在CLI创建新的Component，会自动添加到app.component.ts  和 declarations中。

在这里我遇到一个问题，刚开始我把heroes文件夹创建在了src同级的目录。当我使用CLI命令创建新的component，告诉我不能找到NgModule。

一个空的Component 已经创建好了。我们就可以在里面添加东西了，下面有一些东西需要注意：

• 我们可以发现CLI 给我们 创建的ts文件中有一个ngOnInit的方法（OnInit 钩子），在这个方法会做两件事情。

1. 1. 执行初始化逻辑
   2. 当设置完属性之后。对组件进行准备

　　　　今后我们还会提交与之相关的其他的钩子，(OnDestroy , OnChange 等，在这里我们就不做过多的解释).

• 在这里需要强调的是。每一个Component都需要导出（export）已方便其他的地方调用。
• 可以直接在class前面加 export 关键字
• 也可以先创建class ，在文件的末尾export component

到这里我遇到了一些问题， 当我添加新的Component 到index.html里面 ，信息并没有正确显示。按理说这个是CLI自动生成，难道是app的入口是index.html里面的app-root， 那我换成我新加的不就可以了嘛。可是这条路没有走通。 为什么不起作用勒。一段时间的分析和研究。我找到了答案。

1. 从angular.json 文件我们发现入口确实是index.html , ts 则是main.ts
2. 进去main.ts 查看。platformBrowser 导入的是AppModule
3. 接着顺藤摸瓜，我们看到app.module.ts 里面的bootstrap（引导程序） 的参数是AppComponent （这个component的selector 就是app-root）。
4. 我们试着把bootstrap的参数改成我们新加的component。
5. 嗯。没错。他工作了。我们看到了新的component的信息。

但是按照结构我还是保留了app-root，然后在app.component.html 中添加新的component。

这样Component就算创建好了。我们需要给他添加一些显示信息。

要显示什么勒？既然我们用的是基于TypeScript的Angular2，我们就可以用TypeScript的新特性来储存信息。

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

在这里我们创建了Hero对象，并导出，接着我们进去heroes component。我们可以import 导入对象一边使用。当Hero对象导入heroes.component 我们就可以创建对象并赋值。

import { Hero } from '../Entities/hero'

  hero: Hero = {
    id: 1,
    name:'Allen'
  }

我创建了一个文件夹来存放所有的entity，你可以穿件在任何地方，只需要引入正确的路劲。

这样我们就可以用hero（对象的名称）在页面上访问我们刚刚创建的Hero对象了。

ID : {{hero.id}}<br />
Name : {{hero.name | uppercase}}

现在我们有了对象。也可以显示在页面是。那我们可以试着利用Angular的双向绑定来修改hero的值了。

在页面上新建一个input并且ngModel指向hero.name

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

当你加上 [(ngModel)] 之后这个应用无法工作了。打开浏览器的开发工具，就会在控制台中看到如下信息.

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

虽然 ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。

它属于一个可选模块 FormsModule，你必须自行添加此模块才能使用该指令。所以我们找到app.module.ts ，导入FormsModule。

import { FormsModule } from '@angular/forms';

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

接着我们就可以看到我们刚刚添加的input元素，并且赋值成hero.name的值。如果修改input的值hero.name的值也相应修改了。