荣耀彩票代理

  • 热门专题

Angular2入门系列教程4服务

作者:雨落三竹  发布日期:2016-12-26 20:23:29
  •    SHANGYIPIANWENZHANG Angular2RUMENXILIEJIAOCHENG-DUOGEZUJIAN,ZHUCONGGUANXI

     ZAIBIANCHENGZHONG,WOMENTONGCHANGHUIJIANGSHUJUTIGONGDANDUFENLICHULAI,YIMIANZAIBIANXIECHENGXUDEGUOCHENGZHONGFANFUFUZHIZHANTIESHUJUQINGQIUDEDAIMA

      Angular2ZHONGTIGONGLEYILAIZHURUDEGAINIAN,SHIDEWOMENKEYIHENYOUYADEZUODAOZHEIYIDIAN。ZHEILIJIANDANMIAOSHUXIA,YILAIZHURUKEYISHIWOMENZAIBIANXIEDAIMADESHIHOUBUYONGSHIYONGnew QUSHENGCHENGYIGELEI,ZHEIYANGJIUDADAOLEJIEOUDEMUDE,GENGDUOGUANYUYILAIZHURUDEZHISHIWOJUEDEBUYINGGAIZAIZHEILIJIANGJIE

      和其他方式类似,Angular2使用的是装饰器@Injectable()来描述以一个类是否可注入,我们本篇文章的目的,就是为了剥离数据获取的操作,提供一个可复用的可注入的服务。

    荣耀彩票代理  WEILEFANGBIAN,WOMENZHIJIEZAIZHIQIANDEdataWENJIANJIAMULUXIAJIANLIYIGEblog.service.tsDEWENJIAN,ZHEIGEWENJIANYAOGANMANI?JIUSHIJIANGZHIQIANDEArticleComponentZHONGDEHUOQUblogDEFANGFACHOULICHULAI,CHENGWEIYIGEWANQUANDULIDEMOKUAI,ZHIYUZAIArticleComponentZHONG,WOMENSHIYONGYILAIZHURUDEFANGSHI,JIANGWOMENDEFUWUZHURUJINQU,ZHIJIESHIYONG,KANDAIMA

      

    import { Injectable } from '@angular/core';
    
    import { Blog,BLOGS } from './blog';
    
    @Injectable()
    export class BlogService {
      getBlogs(): Blog[] {
        return BLOGS;
      }
      getSelectedBlog(id:number):Blog
      {
         return this.getBlogs().find(x=>x.id==id);
      }
    }

    荣耀彩票代理  ZHENGRUQIANMIANSUOSHUO,WOMENSHIYONG@Injectable()LAIZHUANGSHILEWOMENDEBlogService,SHIDEWOMENKEYIZAIQITAZUJIANZHONGZHURUZHEIGEFUWU,KANAppComponent,WOMENFAXIANHEZHIQIANYOUYIDIANERGAIBIAN

      

    import { Component } from '@angular/core';
    import {BLOGS,Blog} from '../data/blog';
    import {BlogService} from './../data/blog.service';
    
    @Component({
        selector: 'ngarticle',
        templateUrl: './article.component.html',
        styleUrls:['./article.component.css']
    })
    
    export class ArticleComponent  {
        blogList:Blog[];
        selectedBlog:Blog;
        constructor(private bService:BlogService)
        {
            this.blogList=bService.getBlogs();
        }
        selectBlog(id:number)
        {
            this.selectedBlog=this.bService.getSelectedBlog(id);
        }
    }

    荣耀彩票代理  WOMENZAIAppComponentDEGOUZAOHANSHUZHONGSHIYONGLEBlogServiceDECANSHU,SHIDEWOMENKEYIZAIQILEIDENEIBURENYISHIYONGWOMENDEFUWU(QISHINIBINGBUYONGKEYIGUANXINYILAIZHURUZENMEGONGZUODE,NIXUYAOLEJIEDESHITAJIBIANCHENGDAILAIJIEOUDEZUOYONG)

      ERDANGWOMENXINGZHIBOBODIYONGng serve YUNXINGDESHIHOU,WOMENQUEFAXIAN,ZENMEBAOCUOLE?

      

      WOMENKANDAOAngular2JIWOMENDETISHISHIBlogServiceMEIYOUProvider;

    荣耀彩票代理  WOMENXUYAOZAIAppComponentZUJIANDE@Component()ZHUANGSHIQIZHONGTIANJIAZHEIYANGYIJUHUA

      providers:[BlogService]

    荣耀彩票代理  providerDEZUOYONG,JIUSHIGAOSUAngular,WOMENZAICHUSHIHUAAppComponentDESHIHOU,TONGSHIYEYAOCHUANGJIANYIGEBlogServiceDESHILI,ZHEIYANG,WOMENJIUKEYIZAIZUJIANZHONGSHIYONGLE

      

    荣耀彩票代理  HAOLE,DAOZHEILI,WOMENZHIXUYAOZAIAppComponnet.htmlBAHUOQUdetailDEHANSHUDECANSHUGAILEJIUXINGLE

      

    <div class='article'>
        <ul class='articleList'>
                <li *ngFor='let blog of blogList' (click)='selectBlog(blog.id)'>
                    <a>
                       {{blog.id}}:{{blog.title}}
                    </a>
                </li>
        </ul>
        <div>
        <article-detail  [blog]='selectedBlog'></article-detail>
            
        </div>
    </div>

    荣耀彩票代理YUNXINGXIAOGUOMA,QISHIHESHANGPIANDAIMADEHAISHIYIYANG,DANSHIHAISHITIEXIABA

    荣耀彩票代理  JIEXIALAIWOMENJIANGYAOJIXUXUEXIRUHESHIYONGAngularZHONGDELUYOUHEAngualrZHONGDEHTTPQINGQIU;ERZAIHTTPQINGQIUYIZHANG,WOMENJIANGZHANKAIjsZHONGJIYUPromiseDEYIBUBIANCHENGHEObservable(KEGUANCHADUIXIANG)DEXUEXI,TUZHONG,WOMENYEHUIJIANGJIERUHEZAIAngular2ZHONGSHIYONGJquery!

    荣耀彩票代理  WOHAOXIANGHENBUHUIXIABIBI,JIUZHEIYANGBA

      GENGXINing。。。

      


      XIANGMUYIJINGFANGDAOLEgitbubSHANG,DIZHI http://github.com/SeeSharply/LearnAngular

      BENWENZHANGDETIJIAO http://github.com/SeeSharply/LearnAngular/tree/df1cd319b3571622242ae4d1b424a5d9e853ed93

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规