Angular2快速入門-2.建立一個新聞列表

背景：

咱們想經過一個例子，展現下Angular2 怎麼綁定頁面，怎麼建立Component，

例子：咱們建立一個新聞列表，當點擊新聞列表中某一條新聞的時候，展現出該條新聞的詳細信息，

在詳細信息中能夠修改新聞標題。

 

第1、建立新聞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 並不能看到咱們的新聞列表

第2、集成到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 ，運行結果以下

第3、增長新聞明細

咱們想在用戶點擊新聞列表的時候下面展現新聞的詳細信息，該如何操做那

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 的新聞項上增長

 

<li *ngFor="let n of newlist" (click)="onSelected(n)" >

 

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 能夠看到以下結果

第4、總結

1.熟悉Component的建立，注意裝飾器的寫法@Component 中的標籤，另外templateUrl，能夠本身使用 template:,一般簡單的時候能夠直接使用

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

3.瞭解NgModule 和Component的關係，一個app的根模塊一般都是app.module.ts