資訊專欄INFORMATION COLUMN
摘要：編寫單一組件我們首先寫一個(gè)書本信息的組件，代碼如下單個(gè)課本像火焰像灰燼程姬知識(shí)點(diǎn)是一個(gè)的復(fù)寫器指令，就像中的和中的。寫到這里，看看我們項(xiàng)目，還是一樣正常在運(yùn)行，只是現(xiàn)在項(xiàng)目中組件分工更加明確了。
本文目錄
一、項(xiàng)目起步
二、編寫路由組件
三、編寫頁面組件
1.編寫單一組件
2.模擬數(shù)據(jù)
3.編寫主從組件
四、編寫服務(wù)
1.為什么需要服務(wù)
2.編寫服務(wù)
五、引入RxJS
1.關(guān)于RxJS
2.引入RxJS
3.改造數(shù)據(jù)獲取方式
六、改造組件
1.添加歷史記錄組件
2.添加和刪除歷史記錄
七、HTTP改造
1.引入HTTP
2.通過HTTP請(qǐng)求數(shù)據(jù)
3.通過HTTP修改數(shù)據(jù)
4.通過HTTP增加數(shù)據(jù)
5.通過HTTP刪除數(shù)據(jù)
6.通過HTTP查找數(shù)據(jù)
本項(xiàng)目源碼放在github
三、編寫頁面組件接下來開始編寫頁面組件，這里我們挑重點(diǎn)來寫，一些布局的樣式，后面可以看源碼。
1.編寫單一組件我們首先寫一個(gè)書本信息的組件，代碼如下：
知識(shí)點(diǎn)：
*ngFor 是一個(gè) Angular 的復(fù)寫器（repeater）指令，就像angular1中的ng-for和vuejs中的v-for。 它會(huì)為列表中的每項(xiàng)數(shù)據(jù)復(fù)寫它的宿主元素。
這時(shí)候可以看到頁面變成下面這個(gè)樣子：
接下來我們要把寫死在HTML上面的數(shù)據(jù)，抽到JS中：
現(xiàn)在先新建一個(gè)books.ts文件來定義一個(gè)Book類，并添加id，url，title和author四個(gè)屬性：
// src/app/books.ts
export class Book {
id: number;
url: string;
title: string;
author: string;
}
然后回到index.component.ts文件去引入它，并定義一個(gè)books屬性，使用導(dǎo)入進(jìn)來的Book類作為類型：
// index.component.ts
import { Book } from "../books";
export class IndexComponent implements OnInit {
books: Book = {
id: 1,
url: "https://img3.doubanio.com/view/subject/m/public/s29988481.jpg",
title: "像火焰像灰燼",
author: "程姬",
}
}
然后再改造前面的組件文件index.component.html:
接著，我們?cè)贋槊總€(gè)課本添加一個(gè)點(diǎn)擊事件，來實(shí)現(xiàn)點(diǎn)擊封面圖能查看大圖的效果，現(xiàn)在index.component.ts中定義一個(gè)getDetailImage方法，并在index.component.html中綁定該方法：
// index.component.ts
export class IndexComponent implements OnInit {
getDetailImage(books){
alert(`正在查看id為${books.id}的大圖！`);
}
}
這邊方法的具體實(shí)現(xiàn)，不寫，不是本文重點(diǎn)。下面是增加點(diǎn)擊事件的綁定：
知識(shí)點(diǎn)：
(click)是Angular用來綁定事件，它會(huì)讓 Angular 監(jiān)聽這個(gè) 元素的 click 事件。 當(dāng)用戶點(diǎn)擊
時(shí)，Angular 就會(huì)執(zhí)行表達(dá)式 getDetailImage(books)。
再來，我們引入前面學(xué)到的路由鏈接指令來改造HTML：
{{books.title}}
這時(shí)候，我們?cè)邳c(diǎn)擊書本的標(biāo)題，發(fā)現(xiàn)頁面跳轉(zhuǎn)到URL地址為http://localhost:4200/detail/1的頁面，這就說明，我們頁面的路由跳轉(zhuǎn)也成功了~
改造完成后，可以看到，頁面顯示的還是一樣，接下來我們先這樣放著，因?yàn)槲覀兒竺鏁?huì)進(jìn)行數(shù)據(jù)模擬，和模擬服務(wù)器請(qǐng)求。
我們就這樣寫好第一個(gè)單一組件，并且數(shù)據(jù)是從JS中讀取的。
2.模擬數(shù)據(jù)這時(shí)候?yàn)榱朔奖愫竺鏀?shù)據(jù)渲染，我們這里需要模擬一些本地?cái)?shù)據(jù)，我們創(chuàng)建一個(gè)本地 mock-books.ts文件來存放模擬的數(shù)據(jù)：
// app/mock-books.ts
import { Books } from "./books";
export const BookList: Books[] = [
{
id: 1,
url: "https://img3.doubanio.com/view/subject/m/public/s29988481.jpg",
title: "像火焰像灰燼",
author: "程姬",
},
// 省略其他9條
]
然后在index.component.ts中導(dǎo)入模擬的數(shù)據(jù)，并將原有的books值修改成導(dǎo)入的模擬數(shù)據(jù)BookList：
// index.component.ts
import { BookList } from "../mock-books";
books = BookList;
并將原本的*ngFor中修改成這樣，綁定真正的數(shù)據(jù)：
3.編寫主從組件
當(dāng)我們寫完一個(gè)單一組件后，我們會(huì)發(fā)現(xiàn)，如果我們把每個(gè)組件都寫到同一個(gè)HTML文件中，這是很糟糕的事情，這樣做有缺點(diǎn)：
代碼復(fù)用性差；（導(dǎo)致每次相同功能要重新寫）
代碼難維護(hù)；（因?yàn)橐粋€(gè)文件會(huì)非常長）
影響性能；（打開每個(gè)頁面都要重復(fù)加載很多）
為了解決這個(gè)問題，我們這里就要開始使用真正的組件化思維，將通用常用組件抽離出來，通過參數(shù)傳遞來控制組件的不同業(yè)務(wù)形態(tài)。
這便是我們接下來要寫的主從組件。
思考一下，我們這里現(xiàn)在能抽成組件作為公共代碼的，就是這個(gè)單個(gè)書本的內(nèi)容，因?yàn)槊總€(gè)書本的內(nèi)容都一致，只是里面數(shù)據(jù)的差異，于是我們?cè)傩陆ㄒ粋€(gè)組件：
ng g component books
并將前面index.component.html中關(guān)于課本的代碼剪切到books.component.html中來，然后刪除掉*ngFor的內(nèi)容，并將原本本地的變量books替換成list，這個(gè)變量我們等會(huì)會(huì)取到：
再將這個(gè)組件，引用到它的父組件中，這里是要引用到index.component.html的組件中，并將前面的*ngFor再次傳入
接下來要做的就是獲取到list變量的值，顯然這個(gè)值是要從外面組件傳進(jìn)來的，我們需要在books.component.ts引入前面定義的 Books類 和 @Input() 裝飾器，還要添加一個(gè)帶有 @Input() 裝飾器的 list 屬性，另外還要記得將getDetailImage方法也剪切過來：
// books.component.ts
import { Component, OnInit, Input } from "@angular/core";
import { Books } from "../books";
export class BooksComponent implements OnInit {
@Input() list: Books;
constructor() { }
ngOnInit() {}
getDetailImage(books){
alert(`正在查看id為${books.id}的大圖！`);
}
}
@Input() 裝飾器介紹具體可以查看 手冊(cè)
我們要獲取的 list 屬性必須是一個(gè)帶有 @Input() 裝飾器的輸入屬性，因?yàn)橥獠康?IndexComponent 組件將會(huì)綁定到它。就像這樣：
知識(shí)點(diǎn)：
[list]="item" 是 Angular 的屬性綁定語法。這是一種單向數(shù)據(jù)綁定。從 IndexComponent 的 item 屬性綁定到目標(biāo)元素的 list 屬性，并映射到了 BooksComponent 的 list 屬性。
做到這里，我們已經(jīng)將BooksComponent作為IndexComponent的子組件來引用了，在實(shí)際開發(fā)過程中，這樣的父子組件關(guān)系，會(huì)用的非常多。
寫到這里，看看我們項(xiàng)目，還是一樣正常在運(yùn)行，只是現(xiàn)在項(xiàng)目中組件分工更加明確了。
現(xiàn)在的效果圖：
本部分內(nèi)容到這結(jié)束
| Author | 王平安 |
|---|---|
| pingan8787@qq.com | |
| 博 客 | www.pingan8787.com |
| 微 信 | pingan8787 |
| 每日文章推薦 | https://github.com/pingan8787... |
| JS小冊(cè) | js.pingan8787.com |
| 微信公眾號(hào) | 前端自習(xí)課 |
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/102027.html
摘要：啟動(dòng)服務(wù)，并打開新窗口可簡寫創(chuàng)建新組件可簡寫創(chuàng)建新服務(wù)創(chuàng)建路由模塊其他另外還有很多的命令提供，詳細(xì)可以查閱官方文檔命令。引入路由模塊導(dǎo)出路由模塊的指令這里需要添加一個(gè)數(shù)組，并傳入，導(dǎo)出讓路由器的相關(guān)指令可以在中的組件中使用。 本文目錄 一、項(xiàng)目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) 2....
摘要：發(fā)布通過回調(diào)方法向發(fā)布事件。觀察者一個(gè)回調(diào)函數(shù)的集合，它知道如何去監(jiān)聽由提供的值。 本文目錄 一、項(xiàng)目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) 2.編寫服務(wù) 五、引入RxJS 1.關(guān)于RxJS 2.引入RxJS 3.改造數(shù)據(jù)獲取方式 六、改造組件 1.添...
摘要：然后我們?cè)诟附M件上添加事件監(jiān)聽，并傳入本地的在對(duì)應(yīng)的中添加方法再來，我們?cè)谧咏M件上多導(dǎo)入和，并添加修飾器和調(diào)用這樣就實(shí)現(xiàn)了我們父子組件之間的事件傳遞啦，現(xiàn)在我們的頁面還是正常運(yùn)行，并且刪除一條數(shù)據(jù)后，頁面數(shù)據(jù)會(huì)更新。 本文目錄 一、項(xiàng)目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) ...
摘要：最終代碼省略其他輸入類型用標(biāo)識(shí)查詢類型需要至少定義一個(gè)不要會(huì)不顯示查詢這里需要轉(zhuǎn)成數(shù)組因?yàn)榍懊娑x了返回值是類型相當(dāng)于數(shù)據(jù)庫的添加操作相當(dāng)于數(shù)據(jù)庫的更新操作省略其他現(xiàn)在我們可以啟動(dòng)服務(wù)器，在上測(cè)試下效果了。 showImg(https://segmentfault.com/img/remote/1460000019142304?w=893&h=438); 看完復(fù)聯(lián)四，我整理了這份 Gr...
摘要：由于之前安裝的是的版本，需要卸載了，安裝最新的版本。清除緩存，確保卸載干凈具體參考安裝最新版本安裝成功后提示意思是版的需要版本最低，我之前的是的版本。先安裝，去下載安裝。在命令行輸入檢查是否安裝成功。 最近聽了大漠老師分享的angular6的講解（附個(gè)鏈接大漠老師課程：http://www.ngfans.net/topic/2...），像是沙漠中發(fā)現(xiàn)了綠洲一樣，決定好好學(xué)習(xí)一番，于是準(zhǔn)...
閱讀 1968·2021-11-24 09:39
閱讀 2413·2021-09-30 09:47
閱讀 4334·2021-09-22 15:57
閱讀 2063·2019-08-29 18:36
閱讀 3699·2019-08-29 12:21
閱讀 707·2019-08-29 12:17
閱讀 1381·2019-08-29 11:25
閱讀 842·2019-08-28 18:26
