【CuteJavaScript】Angular6入門專案（2.構建專案頁面和元件）

pingan8787發表於2019-02-23
JavaScriptAngular元件

本文目錄

  • 一、專案起步
  • 二、編寫路由元件
  • 三、編寫頁面元件
    • 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.編寫單一元件

我們首先寫一個書本資訊的元件，程式碼如下：

<!-- index.component.html -->
<div class="content">
  <div class="books_box">
    <!-- 單個課本 -->
    <div class="books_item" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
      <img class="cover" src="https://img3.doubanio.com/view/subject/m/public/s29988481.jpg">
      <div class="title"><a>像火焰像灰燼</a></div>
      <div class="author">程姬</div>
    </div>
  </div>
</div>
複製程式碼

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

圖片3-1

接下來我們要把寫死在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:

<!-- index.component.html -->
<div class="books_item" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
  <img class="cover" src="{{books.url}}" alt="{{books.id}}">
  <div class="title">
    <a>{{books.title}}</a>
  </div>
  <div class="author">{{books.author}}</div>
</div>
複製程式碼

接著，我們再為每個課本新增一個點選事件，來實現點選封面圖能檢視大圖的效果，現在index.component.ts中定義一個getDetailImage方法，並在index.component.html中繫結該方法：

// index.component.ts
export class IndexComponent implements OnInit {
  getDetailImage(books){
    alert(`正在檢視id為${books.id}的大圖！`);
  }
}
複製程式碼

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

<!-- index.component.html -->
<img class="cover" src="{{books.url}}" alt="{{books.id}}" (click)="getDetailImage(books)">
複製程式碼

知識點：
(click)是Angular用來繫結事件，它會讓 Angular 監聽這個<img> 元素的 click 事件。 當使用者點選 <img> 時，Angular 就會執行表示式 getDetailImage(books)。

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

<!-- index.component.html -->
<a routerLink="/detail/{{books.id}}">{{books.title}}</a>
複製程式碼

這時候，我們在點選書本的標題，發現頁面跳轉到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中修改成這樣，繫結真正的資料：

<!-- index.component.html -->
<div class="books_item" *ngFor="let item of books">
  <img class="cover" src="{{item.url}}" alt="{{item.id}}">
  <div class="title">
    <a>{{item.title}}</a>
  </div>
  <div class="author">{{item.author}}</div>
</div>
複製程式碼

3.編寫主從元件

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

  • 程式碼複用性差；（導致每次相同功能要重新寫）
  • 程式碼難維護；（因為一個檔案會非常長）
  • 影響效能；（開啟每個頁面都要重複載入很多）

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

思考一下，我們這裡現在能抽成元件作為公共程式碼的，就是這個單個書本的內容，因為每個書本的內容都一致，只是裡面資料的差異，於是我們再新建一個元件：

ng g component books
複製程式碼

並將前面index.component.html中關於課本的程式碼剪下到books.component.html中來，然後刪除掉*ngFor的內容，並將原本本地的變數books替換成list，這個變數我們等會會取到：

<!-- books.component.html -->
<div class="books_item">
  <img class="cover" src="{{list.url}}" alt="{{list.id}}" (click)="getDetailImage(list)">
  <div class="title">
    <a routerLink="/detail/{{list.id}}">{{list.title}}</a>
  </div>
  <div class="author">{{list.author}}</div>
</div>
複製程式碼

再將這個元件，引用到它的父元件中，這裡是要引用到index.component.html的元件中，並將前面的*ngFor再次傳入<app-books>：

<div class="content">
  <div class="books_box">
    <app-books *ngFor="let item of books"></app-books>
  </div>
</div>
複製程式碼

接下來要做的就是獲取到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 元件將會繫結到它。就像這樣：

<app-books *ngFor="let list of books" [list]="item"></app-books>
複製程式碼

知識點：
[list]="item" 是 Angular 的屬性繫結語法。這是一種單向資料繫結。從 IndexComponent 的 item 屬性繫結到目標元素的 list 屬性，並對映到了 BooksComponent 的 list 屬性。

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

寫到這裡，看看我們專案，還是一樣正常在執行，只是現在專案中元件分工更加明確了。

現在的效果圖：

圖片3-2

本部分內容到這結束

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

前端自習課

相關文章