Angular2快速入门-4.创建一个服务(创建NewsServ…

2018-06-24 00:52:28来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

上篇我们使用的数据是通过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. 了解箭头函数的使用

最终程序下载  点击下载

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Date方法整理

下一篇:开源跨平台移动项目Ngui【Action动作系统】