Angular2快速入门-4.创建一个服务（创建NewsService提供数据）

上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的，这篇我们把提供数据的部分单独封装成服务

第一、创建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 承诺，它是一种异步技术，防止页面请求的时候线程阻塞，你可以把它理解成，当有数据的时候，会自动推送给你，

第二、修改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进来。

第三、总结

命令行 npm start，程序可以work了，

我们需要注意的几个点，

1. 服务写好后，需要在Component中导入到 Providers

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

3. 注意Promise的写法，只有返回时Promise的对象的时候，才可以使用then 后续处理

4. 了解箭头函数的使用

最终程序下载点击下载

巴特西

Angular2快速入门-4.创建一个服务（创建NewsService提供数据）

第一、创建news.service.ts

第二、修改newslist.component

第三、总结

最新文章

热门文章