国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【CuteJavaScript】Angular6入門項目（2.構建項目頁面和組件）

Lemon_95 / 1054人閱讀

摘要：編寫單一組件我們首先寫一個書本信息的組件，代碼如下單個課本像火焰像灰燼程姬知識點是一個的復寫器指令，就像中的和中的。寫到這里，看看我們項目，還是一樣正常在運行，只是現在項目中組件分工更加明確了。

本文目錄

一、項目起步

二、編寫路由組件

三、編寫頁面組件

1.編寫單一組件

2.模擬數據

3.編寫主從組件

四、編寫服務

1.為什么需要服務

2.編寫服務

五、引入RxJS

1.關于RxJS

2.引入RxJS

3.改造數據獲取方式

六、改造組件

1.添加歷史記錄組件

2.添加和刪除歷史記錄

七、HTTP改造

1.引入HTTP

2.通過HTTP請求數據

3.通過HTTP修改數據

4.通過HTTP增加數據

5.通過HTTP刪除數據

6.通過HTTP查找數據

本項目源碼放在github

三、編寫頁面組件

接下來開始編寫頁面組件，這里我們挑重點來寫，一些布局的樣式，后面可以看源碼。

1.編寫單一組件

我們首先寫一個書本信息的組件，代碼如下：

知識點：
*ngFor 是一個 Angular 的復寫器（repeater）指令，就像angular1中的ng-for和vuejs中的v-for。 它會為列表中的每項數據復寫它的宿主元素。
這時候可以看到頁面變成下面這個樣子：

接下來我們要把寫死在HTML上面的數據，抽到JS中：

現在先新建一個books.ts文件來定義一個Book類，并添加id，url，title和author四個屬性：

// src/app/books.ts
export class Book {
    id: number;
    url: string;
    title: string;
    author: string;
}

然后回到index.component.ts文件去引入它，并定義一個books屬性，使用導入進來的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:




  {{books.id}}
  
  
{{books.author}}

接著，我們再為每個課本添加一個點擊事件，來實現點擊封面圖能查看大圖的效果，現在index.component.ts中定義一個getDetailImage方法，并在index.component.html中綁定該方法：

// index.component.ts
export class IndexComponent implements OnInit {
  getDetailImage(books){
    alert(`正在查看id為${books.id}的大圖！`);
  }
}

這邊方法的具體實現，不寫，不是本文重點。下面是增加點擊事件的綁定：


{{books.id}}

知識點：
(click)是Angular用來綁定事件，它會讓 Angular 監聽這個 元素的 click 事件。 當用戶點擊 時，Angular 就會執行表達式 getDetailImage(books)。

再來，我們引入前面學到的路由鏈接指令來改造HTML：


{{books.title}}

這時候，我們在點擊書本的標題，發現頁面跳轉到URL地址為http://localhost:4200/detail/1的頁面，這就說明，我們頁面的路由跳轉也成功了~

改造完成后，可以看到，頁面顯示的還是一樣，接下來我們先這樣放著，因為我們后面會進行數據模擬，和模擬服務器請求。

我們就這樣寫好第一個單一組件，并且數據是從JS中讀取的。

2.模擬數據

這時候為了方便后面數據渲染，我們這里需要模擬一些本地數據，我們創建一個本地 mock-books.ts文件來存放模擬的數據：

// 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中導入模擬的數據，并將原有的books值修改成導入的模擬數據BookList：

// index.component.ts
import { BookList } from "../mock-books";
books = BookList;

并將原本的*ngFor中修改成這樣，綁定真正的數據：




  {{item.id}}
  
  
{{item.author}}
3.編寫主從組件

當我們寫完一個單一組件后，我們會發現，如果我們把每個組件都寫到同一個HTML文件中，這是很糟糕的事情，這樣做有缺點：

代碼復用性差；（導致每次相同功能要重新寫）

代碼難維護；（因為一個文件會非常長）

影響性能；（打開每個頁面都要重復加載很多）

為了解決這個問題，我們這里就要開始使用真正的組件化思維，將通用常用組件抽離出來，通過參數傳遞來控制組件的不同業務形態。
這便是我們接下來要寫的主從組件。

思考一下，我們這里現在能抽成組件作為公共代碼的，就是這個單個書本的內容，因為每個書本的內容都一致，只是里面數據的差異，于是我們再新建一個組件：

ng g component books

并將前面index.component.html中關于課本的代碼剪切到books.component.html中來，然后刪除掉*ngFor的內容，并將原本本地的變量books替換成list，這個變量我們等會會取到：




  {{list.id}}
  
  
{{list.author}}

再將這個組件，引用到它的父組件中，這里是要引用到index.component.html的組件中，并將前面的*ngFor再次傳入：

接下來要做的就是獲取到list變量的值，顯然這個值是要從外面組件傳進來的，我們需要在books.component.ts引入前面定義的 Books類 和 @Input() 裝飾器，還要添加一個帶有 @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() 裝飾器介紹具體可以查看 手冊

我們要獲取的 list 屬性必須是一個帶有 @Input() 裝飾器的輸入屬性，因為外部的 IndexComponent 組件將會綁定到它。就像這樣：

知識點：
[list]="item" 是 Angular 的屬性綁定語法。這是一種單向數據綁定。從 IndexComponent 的 item 屬性綁定到目標元素的 list 屬性，并映射到了 BooksComponent 的 list 屬性。

做到這里，我們已經將BooksComponent作為IndexComponent的子組件來引用了，在實際開發過程中，這樣的父子組件關系，會用的非常多。

寫到這里，看看我們項目，還是一樣正常在運行，只是現在項目中組件分工更加明確了。

現在的效果圖：

本部分內容到這結束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 https://github.com/pingan8787...
JS小冊 js.pingan8787.com
微信公眾號 前端自習課

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102027.html

相關文章

  • 【CuteJavaScript】Angular6入門項目（1.構建項目和創建路由）

    摘要：啟動服務，并打開新窗口可簡寫創建新組件可簡寫創建新服務創建路由模塊其他另外還有很多的命令提供，詳細可以查閱官方文檔命令。引入路由模塊導出路由模塊的指令這里需要添加一個數組，并傳入，導出讓路由器的相關指令可以在中的組件中使用。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件 四、編寫服務 1.為什么需要服務 2....

    bergwhite 評論0 收藏0

  • 【CuteJavaScript】Angular6入門項目（3.編寫服務和引入RxJS）

    摘要：發布通過回調方法向發布事件。觀察者一個回調函數的集合，它知道如何去監聽由提供的值。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件 四、編寫服務 1.為什么需要服務 2.編寫服務 五、引入RxJS 1.關于RxJS 2.引入RxJS 3.改造數據獲取方式 六、改造組件 1.添...

    RebeccaZhong 評論0 收藏0

  • 【CuteJavaScript】Angular6入門項目（4.改造組件和添加HTTP服務）

    摘要：然后我們在父組件上添加事件監聽，并傳入本地的在對應的中添加方法再來，我們在子組件上多導入和，并添加修飾器和調用這樣就實現了我們父子組件之間的事件傳遞啦，現在我們的頁面還是正常運行，并且刪除一條數據后，頁面數據會更新。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件 四、編寫服務 1.為什么需要服務 ...

    BDEEFE 評論0 收藏0

  • 【CuteJavaScript】GraphQL真香入門教程

    摘要：最終代碼省略其他輸入類型用標識查詢類型需要至少定義一個不要會不顯示查詢這里需要轉成數組因為前面定義了返回值是類型相當于數據庫的添加操作相當于數據庫的更新操作省略其他現在我們可以啟動服務器，在上測試下效果了。 showImg(https://segmentfault.com/img/remote/1460000019142304?w=893&h=438); 看完復聯四，我整理了這份 Gr...

    bingo 評論0 收藏0

  • angular6入門之安裝angular-cli

    摘要：由于之前安裝的是的版本，需要卸載了，安裝最新的版本。清除緩存，確保卸載干凈具體參考安裝最新版本安裝成功后提示意思是版的需要版本最低，我之前的是的版本。先安裝，去下載安裝。在命令行輸入檢查是否安裝成功。 最近聽了大漠老師分享的angular6的講解（附個鏈接大漠老師課程：http://www.ngfans.net/topic/2...），像是沙漠中發現了綠洲一樣，決定好好學習一番，于是準...

    loonggg 評論0 收藏0

發表評論

0條評論

Lemon_95

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<