zoukankan      html  css  js  c++  java
  • angularjs2 学习笔记(三) 服务

    在anglar2中服务是什么?

    如果在项目中有一段代码是很多组件都要使用的,那么最好的方式就是把它做成服务。

    服务是一种在组件中共享功能的机制,当我们使用标签将多个组件组合在一起时我们需要操作一些数据或是需要做一些运算时,我们需要做一个服务;服务能帮我们引入外部的数据。那么如何创建一个服务呢?

    创建服务

    创建一个简单的服务

    import {Injectable} from 'angular2/core';

    import {PLANETS} from './planets-data';

     

    @Injectable()

    export class PlanetService {

        getPlanets(){

            return Promise.resolve(PLANETS);

        }

    }

    首先需要一个Injectable的指令,这个指令能告诉其他引用的组件这个服务是可注入的。

    然后定义一个方法用来返回数据。

    服务调用

    服务调用也很简单

    import {Component} from "angular2/core";

    import {PlanetService} from "./planet.service"; //1

    import {PlanetComponent} from "./planet.component";

    import {Planet} from "./planet";

     

     

    @Component({

        selector: "my-app",

        templateUrl: "app/planet-list.component.html",

        directives: [PlanetComponent],

        providers:[PlanetService], //2

        styles:[`

                    body{

                        padding:0;

                        margin:0;

                        font-family:Roboto,Arial,sans-serif;

                        font-size:16px

                    }

                    .title {

                        color:#018EFA;

                    }

                    .clicked{

                        background-color: #9C00FE;

                        color:white;

                    }

                    .labels{

                        background-color: black;

                        color: white;

                    }

     

        `]

    })

    export class PlanetListComponent{

        public planets : Planet[];

     

        public selectedPlanet = {};

     

        public onNameClick(planet){

            this.selectedPlanet = planet;

        }

        constructor(private _planetService: PlanetService){  // 3

            this.getPlanets();

        }

     

        // make a call to our planet service

        getPlanets(){  //4

            this._planetService.getPlanets().then((planets:Planet[])=>this.planets = planets);

        }

     

    }

    1、  引入服务(import)

    2、  使用providers 来注入服务

    3、  创建一个服务的示例

    使用promise调用服务

  • 相关阅读:
    08-01集合运算
    07-03成员运算符
    07-02集合
    07-01结构与封装
    06-01字符串格式化.md
    06-03线性结构与切片
    06-02字符串与bytes
    05-02命名元组
    05-01元组
    04-01列表与常用操作
  • 原文地址:https://www.cnblogs.com/oldkingsir/p/5533669.html
Copyright © 2011-2022 走看看