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的值也相应修改了。