Angular2快速入门-2.创建一个新闻列表

背景：

我们想通过一个例子，展示下Angular2 怎么绑定页面，怎么创建Component，

例子：我们创建一个新闻列表，当点击新闻列表中某一条新闻的时候，展示出该条新闻的详细信息，

在详细信息中可以修改新闻标题。

第一、创建新闻Component（视图组件）

接着上篇文章，我们在app文件下创建news文件夹，在news文件夹下我们需要创建一个新闻的实体类

1）news.ts

export class News{

    id:number;

    title:string;

    create_date:string;

    click:number;

}

接着我们创建一个模拟新闻列表的类

2）mock-news.ts

import {News} from './news';

export const NewList: News[] =

[

    { id: 1, title: '十九大最新報道', create_date: '2017-11-10', click: 10 },

    { id: 2, title: '西二旗地铁空车', create_date: '2017-10-10', click: 11 },

    { id: 3, title: '日本有开始找事了', create_date: '2017-11-12', click: 12 }

]

准备好上面的工作，我们真正需要创建component了，

3）创建newslist.component.ts

import { Component } from '@angular/core';

import { News } from './news';

import { NewList } from './mock-news';

@Component({

    selector:'news',

    templateUrl:'./newslist.component.html',

    styleUrls:['./newslist.component.css']

})

export class NewsListComponent{

    newlist = NewList;

}

4）创建 newslist.component.html

<h2>新闻列表</h2>

<ul class="ul_news">

    <li *ngFor="let n of newlist"  >

        {{n.id}}.{{n.title}} <span>{{n.create_date}}</span>

    </li>

</ul>

5）创建newslist.component.css

*{margin: 0px; padding: 0;}

.ul_news{list-style: none; margin-bottom: 10px; }

.ul_news li { width: 300px; height: 30px; line-height: 30px; text-align: left; padding:5px;

    border-bottom: 1px dashed #ccc;

cursor:pointer;}

.ul_news li:hover{background:blanchedalmond;}

.ul_news li span{float:right;}

至此，我们已经创建完成，目录结果如下图，此时运行npm start 并不能看到我们的新闻列表

第二、集成到app.module上

想在运行时预览需要把我们的NewListComponent 装载到 app.module.ts中，因为他是根模块，启动从这里开始

具体调整入下

app.component.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

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

import { NewsListComponent } from './news/newslist.component';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent,

    NewsListComponent

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

可以看到，我们增加了NewsListComponent ，同时在NgModule的declarations中加入NewsListComponent

另外在app.component.html增加上我们的新视图标签 news

 <h1>

    Welcome to {{title}}!

  </h1>

  <news>

  </news>

在命令行中运行npm start ，运行结果如下

第三、增加新闻明细

我们想在用户点击新闻列表的时候下面展示新闻的详细信息，该如何操作那

1）修改 newslist.component.ts

import { Component } from '@angular/core';

import { News } from './news';

import { NewList } from './mock-news';

@Component({

    selector:'news',

    templateUrl:'./newslist.component.html',

    styleUrls:['./newslist.component.css']

})

export class NewsListComponent{

    newlist = NewList;

    selectedNew:News;

    onSelected(n:News):void{

        this.selectedNew=n;

    }

}

增加属性selectedNew 和事件 onSelected 方法。

同时记得在newlist.component.html 的新闻项上增加

2）修改newlist.component.html

在后面追加代码

<div *ngIf="selectedNew">

    <h3>新闻详细</h3>

    <table>

        <tr>

            <td>id:</td>

            <td> {{selectedNew.id}}</td>

        </tr>

        <tr>

            <td>title:</td>

            <td>

                <input [(ngModel)]="selectedNew.title" placeholder="title" />

            </td>

        </tr>

    </table>

</div>

　　此时要注意，[(ngModel)] 是Angular的双向绑定（先会用，以后再慢慢了解其中的原理），需要在app.module.ts中引入FormsModule ，否则页面会报错。

3）再次运行 npm start 可以看到如下结果

第四、总结

1.熟悉Component的创建，注意装饰器的写法@Component 中的标签，另外templateUrl，可以自己使用 template:,通常简单的时候可以直接使用

2.熟悉指令*ngFor，*ngIF,(click)的绑定，双向绑定[(ngModle)] 的用法

3.了解NgModule 和Component的关系，一个app的根模块通常都是app.module.ts