• Notification詳解
  • 一--优乐博彩怎么样、Notification的基本情形元素_--308二四六玄机资料大全:1 標題Title Nam... 詳細
  • 熱門專題

Angular2入門係列教程4服務

作者-_现货黄金模拟大赛:雨落三竹  發布日期|_|365彩票走势图:2016-12-26 20:23:29
Tag標簽__-河间新闻:教程  
  •    上一篇文章 Angular2入門係列教程-多個組件-||舞林大会棒棒糖,主從關係

     在編程中-|142期富婆看图肖特,我們通常會將數據提供單獨分離出來__铀钚,以免在編寫程序的過程中反複複製粘貼數據請求的代碼

      Angular2中提供了依賴注入的概念_|毒黄瓜事件,使得我們可以很優雅得做到這一點--_gts3370。這裏簡單描述下_|-306官方彩票内地版,依賴注入可以使我們在編寫代碼的時候不用使用new 去生成一個類__龙洞堡机场,這樣就達到了解耦的目的--_众彩网是正规的吗,更多關於依賴注入的知識我覺得不應該在這裏講解

      和其他方式類似|_青年中国说余佳文,Angular2使用的是裝飾器@Injectable()來描述以一個類是否可注入|--quick office,我們本篇文章的目的_|_小动脉电影网,就是為了剝離數據獲取的操作||卡其色衬衫,提供一個可複用的可注入的服務__青莲大桥。

      為了方便__|舟山临城外卖,我們直接在之前的data文件夾目錄下建立一個blog.service.ts的文件_-云彩上的翅膀,這個文件要幹嘛呢|_-大庆庆聊?就是將之前的ArticleComponent中的獲取blog的方法抽離出來|-_初二期中考试总结,成為一個完全獨立的模塊|__永胜集团充钱,至於在ArticleComponent中|-阜南教育局,我們使用依賴注入的方式||-36选7好彩1开奖记录,將我們的服務注入進去|__魏征进谏图的作者是谁,直接使用__梵谷饰品美学设计,看代碼

      

    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);
      }
    }

      正如前麵所說_-汤姆斯杯决赛时间,我們使用@Injectable()來裝飾了我們的BlogService,使得我們可以在其他組件中注入這個服務_||问道维护到几点,看AppComponent,我們發現和之前有一點兒改變

      

    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);
        }
    }

      我們在AppComponent的構造函數中使用了BlogService的參數|黑暗之光伴奏,使得我們可以在其類的內部任意使用我們的服務(其實你並不用刻意關心依賴注入怎麼工作的-|_盈鼎国际,你需要了解的是它給編程帶來解耦的作用)

      而當我們興致勃勃地用ng serve 運行的時候-__168彩票手机APP,我們卻發現|_恒心电脑学校,怎麼報錯了_|-银彩印刷?

      

      我們看到Angular2給我們的提示是BlogService沒有Provider;

      我們需要在AppComponent組件的@Component()裝飾器中添加這樣一句話

      providers:[BlogService]

      provider的作用-|金饶,就是告訴Angular--|璎珞潮牌服装批发网,我們在初始化AppComponent的時候_镇江老兵事件,同時也要創建一個BlogService的實例||偃师户外,這樣|__反间谍工作的主管单位是,我們就可以在組件中使用了

      

      好了-||固话积分查询,到這裏__-八仙绘,我們隻需要在AppComponnet.html把獲取detail的函數的參數改了就行了

      

    <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>

    運行效果嘛_-132彩票是正规平台么,其實和上篇代碼的還是一樣_-诺基亚滑盖手机大全图片及报价,但是還是貼下吧

      接下來我們將要繼續學習如何使用Angular中的路由和Angualr中的HTTP請求;而在HTTP請求一章|_dsound dll病毒,我們將展開js中基於Promise的異步編程和Observable(可觀察對象)的學習_|_阿龙山吧,途中_|视觉卡盟,我們也會講解如何在Angular2中使用Jquery__国企改革方向!

      我好像很不會瞎比比||黄山奇石天狗望月,就這樣吧

      更新ing__-意彩彩票注册。__|金巧巧丰胸广告。--36选7开奖中奖规则复式。

      


      項目已經放到了gitbub上||_乐zone,地址 https://github.com/SeeSharply/LearnAngular

      本文章的提交 https://github.com/SeeSharply/LearnAngular/tree/df1cd319b3571622242ae4d1b424a5d9e853ed93

延伸閱讀__易中彩票是真的吗:

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
通博彩票E乐彩360彩票博发彩票大象彩票qq分分彩

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!