【CuteJavaScript】Angular6入門專案（2.構建專案頁面和元件）
接下來開始編寫頁面元件，這裡我們挑重點來寫，一些佈局的樣式，後面可以看原始碼。
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 。 它會為列表中的每項資料複寫它的宿主元素。
這時候可以看到頁面變成下面這個樣子：
接下來我們要把寫死在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 的子元件來引用了，在實際開發過程中，這樣的父子元件關係，會用的非常多。
寫到這裡，看看我們專案，還是一樣正常在執行，只是現在專案中元件分工更加明確了。
現在的效果圖：
