• 万人红黑大战官网

  • 万人红黑大战官网

  • 万人红黑大战官网

  • 万人红黑大战官网

万人红黑大战官网

作者︰雨落三竹  發(fa)布日期(qi)︰2020-02-18 11:05:29
Tag標簽︰教程  
  •    上(shang)一篇文(wen)章(zhang) Angular2入(ru)門系列教程-多個組件,主從關(guan)系

     在編(bian)程tao)zhong),我們通常會將(jiang)數據提供單獨分離出來,以免在編(bian)寫程序的過程tao)zhong)反復復制粘(zhan)貼數據請求的代碼

      Angular2中(zhong)提供了依賴注入(ru)的概念(nian),使得我們可以很優雅得做(zuo)到這(zhe)一點(dian)。這(zhe)里簡(jian)單描述下(xia),依賴注入(ru)可以使我們在編(bian)寫代碼的時候(hou)不(bu)用(yong)使用(yong)new 去生(sheng)成一個類,這(zhe)樣就達到了si)怦畹哪康模 喙guan)于依賴注入(ru)的知識我覺得不(bu)應該在這(zhe)里講解

      和(he)其他方式類似,Angular2使用(yong)的是裝飾wen)qi)@Injectable()來描述以一個類是否可注入(ru),我們本篇文(wen)章(zhang)的目的,就是為了剝離數據獲取的操(cao)作,提供一個可復用(yong)的可注入(ru)的服(fu)務。

      為了方便,我們直ben)釉謚 暗ata文(wen)件夾目錄下(xia)建立(li)一個blog.service.ts的文(wen)件,這(zhe)個文(wen)件要干嘛呢?就是將(jiang)之前的ArticleComponent中(zhong)的獲取blog的方法抽(chou)離出來,成為一個完全獨立(li)的模塊,至于在ArticleComponent中(zhong),我們使用(yong)依賴注入(ru)的方式,將(jiang)我們的服(fu)務注入(ru)進(jin)去,直ben)郵褂yong),看代碼

      

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

      正如前面所說(shuo),我們使用(yong)@Injectable()來裝飾了我們的BlogService,使得我們可以在其他組件中(zhong)注入(ru)這(zhe)個服(fu)務,看AppComponent,我們發(fa)現(xian)和(he)之前有(you)一點(dian)兒改變

      

    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的構造(zao)函數中(zhong)使用(yong)了BlogService的參(can)數,使得我們可以在其類的內部任意使用(yong)我們的服(fu)務(其實你(ni)並不(bu)用(yong)刻意關(guan)心依賴注入(ru)怎(zen)麼工作的,你(ni)需要了si)獾氖撬bian)程帶來解耦的作用(yong))

      而當我們興致(zhi)勃(bo)勃(bo)地用(yong)ng serve 運(yun)行的時候(hou),我們卻發(fa)現(xian),怎(zen)麼報錯了?

      

      我們看到Angular2給我們的提示是BlogService沒(mei)有(you)Provider;

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

      providers:[BlogService]

      provider的作用(yong),就是告(gao)訴(su)Angular,我們在初始化AppComponent的時候(hou),同時也要創建一個BlogService的實例,這(zhe)樣,我們就可以在組件中(zhong)使用(yong)了

      

      好了,到這(zhe)里,我們只需要在AppComponnet.html把(ba)獲取detail的函數的參(can)數改了就行了

      

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

    運(yun)行效果嘛,其實和(he)上(shang)篇代碼的還是一樣,但是還是貼下(xia)吧

      接下(xia)來我們將(jiang)要繼續學習如何使用(yong)Angular中(zhong)的路由(you)和(he)Angualr中(zhong)的HTTP請求;而在HTTP請求一章(zhang),我們將(jiang)展開js中(zhong)基(ji)于Promise的異步編(bian)程和(he)Observable(可觀察(cha)對象)的學習,途(tu)中(zhong),我們也bu)嶠步餿綰臥ngular2中(zhong)使用(yong)Jquery!

      我好像很不(bu)huan)嵯xia)比(bi)比(bi),就這(zhe)樣吧

      更新ing。。。

      


      項(xiang)目已經放到了gitbub上(shang),地址 https://github.com/SeeSharply/LearnAngular

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

About IT165 -廣(guang)告(gao)服(fu)務 -隱(yin)私(si)聲明 -版(ban)權申明 -免責條款 -網站地圖 -網友投稿 -聯系方式
本站內容來自于互聯網,僅供用(yong)于網絡(luo)技(ji)術學習,學習中(zhong)請遵循(xun)相關(guan)法律法規
万人红黑大战官网 | 下一页