Angular2快速入門-4.建立一個服務（建立NewsService提供數據）

上篇咱們使用的數據是經過mock-news.ts中的const News[] 數組直接賦給Component 組件的，這篇咱們把提供數據的部分單獨封裝成服務

第1、建立news.service.ts

import { Injectable } from "@angular/core";
import { News } from './news';
import { NewList } from './mock-news';

@Injectable()
export class NewsService {
    getNews() {
        return Promise.resolve(NewList) ;
    }
}

　裝飾器@Injectable（）表明該服務會在程序啓動時候自動注入Component的組件中，後面會講解怎麼注入。

   咱們在類NewsService中增長了一個方法 getNews方法，該方法返回一個Promise 承諾，它是一種異步技術，防止頁面請求的時候線程阻塞，你能夠把它理解成，當有數據的時候，會自動推送給你，

第2、修改newslist.component

import { Component, OnInit } from '@angular/core';
import { News } from './news';
import { NewList } from './mock-news';
import { NewsService } from './news.service';

@Component({
    selector:'news',
    templateUrl:'./newslist.component.html',
    styleUrls:['./newslist.component.css'],
    providers: [NewsService]
})

export class NewsListComponent implements OnInit {
  
    newlist:News[];
    selectedNew:News;
    onSelected(n:News):void{
        this.selectedNew=n;         
    }

    constructor(private newsService:NewsService){};
    getNews():void{
       this.newsService.getNews().then(newlist=>this.newlist=newlist); 
    }

    ngOnInit():void{
        this.getNews();
    }
}

在該類中咱們作了三處修改

1. 導入服務NewsService，一般服務都是.service.ts後綴，約定。

2. 在providers中增長 NewsService，

3. 集成 OnInit ，增長Angular2的初始化ngOnInit，主要目的是從新設置本身的屬性newlist

4.注意構造函數constructor，服務在這裏DI進來。

第3、總結

命令行 npm start，程序能夠work了，

咱們須要注意的幾個點，

1. 服務寫好後，須要在Component中 導入到 Providers

2. 集成OnInit的時候注意 import { OnInit } from '@angular/core';

3. 注意Promise的寫法，只有返回時Promise的對象的時候，才能夠使用then 後續處理

4. 瞭解箭頭函數的使用

最終程序下載  點擊下載