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. 了解箭头函数的使用

最终程序下载  点击下载