- 制作導(dǎo)航欄組件，使用了bootstrap樣式使用響應(yīng)式布局，在頁面寬度縮小時(shí)導(dǎo)航欄會變成折疊式導(dǎo)航欄，點(diǎn)擊有側(cè)按鈕會展開導(dǎo)航欄的所有導(dǎo)航
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header"> <button type="button" class="collapsed navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-8" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#"
class="navbar-brand">在線競拍</a> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
<ul class="nav navbar-nav">
<li class="active"><a href="#">關(guān)于我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">網(wǎng)站地圖</a></li>
</ul>
</div>
</div>
</nav>
- 為了避免其他組件的內(nèi)容被覆蓋，在style.css中設(shè)置一個(gè)全局樣式
.paddingtop{
padding-top: 70px;
}
- 制作一個(gè)簡單的footer組件
<div class="container">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>這是一個(gè)angular做的APP</p>
</div>
</div>
</footer>
</div>
- 制作一個(gè)表單 ，search 搜索框組件，可以根據(jù)商品的名稱，價(jià)格和類別搜索（此時(shí)并沒有填充數(shù)據(jù)和完成功能，只設(shè)計(jì)出一個(gè)樣式）
<form name="searchForm" role="form">
<div class="form-group" >
<label for="productTitle">商品名稱：</label>
<input type="text" formControlName="title" id="productTitle" class="form-control" placeholder="商品名稱">
</div>
<div class="form-group" >
<label for="productPrice">商品價(jià)格</label>
<input type="text" formControlName="price" id="productPrice" name="productPrice" class="form-control" placeholder="商品價(jià)格">
</div>
<div class="form-group">
<label for="productCategroy">商品類別</label>
<select formControlName="categroy" class="form-control" id="categroy">
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">
搜索
</button>
</div>
</form>
- 制作一個(gè)輪播圖組件
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li></li>
<li></li>
<li></li>
</ol>
<div class="carousel-inner" >
<div class="item active">
<img class="first-slide" src="http://placehold.it/900x300" alt="First slide">
</div>
<div class="item">
<img class="second-slide" src="http://placehold.it/900x300" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="http://placehold.it/900x300" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
- 商品列表組件，使用ts封裝一個(gè)產(chǎn)品信息，聲明產(chǎn)品擁有的屬性id，商品名稱，商品價(jià)格，商品評分，商品描述，商品類別
export class Product {
constructor(
public id:number,
public title:string,
public price:number,
public rating:number,
public desc:string,
public categories:Array<string>
) {
}
}
- 在控制器中聲明一個(gè)數(shù)組，來存放頁面中展示的商品的信息數(shù)據(jù)，在ngOnInit方法中初始化數(shù)組
export class ProductComponent implements OnInit {
private products:Array<Product>;
constructor() {}
ngOnInit() {
this.products = [
new Product(1," 第一個(gè)商品",10,3.5,"這是 第一個(gè)商品的描述",["電子產(chǎn)品"]),
new Product(2," 第二個(gè)商品",10,3.5,"這是 第一個(gè)商品的描述",["圖書"]),
new Product(3," 第三個(gè)商品",10,3.5,"這是 第一個(gè)商品的描述",["硬件設(shè)備"]),
new Product(4," 第四個(gè)商品",10,3.5,"這是 第一個(gè)商品的描述",["電子產(chǎn)品","硬件設(shè)備"]),
new Product(5," 第五個(gè)商品",10,3.5,"這是 第一個(gè)商品的描述",["電子產(chǎn)品"]),
new Product(6," 第六個(gè)商品",10,3.5,"這是 第一個(gè)商品的描述",["圖書"]),
]
}
}
- 商品列表的樣式，使用*ngFor循環(huán)在ts中存入商品數(shù)據(jù)的數(shù)組（類似vue的v-for）
<div class="col-md-4 col-sm-4 col-lg-4" *ngFor="let product of products">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">{{product.price}}元</h4>
<h4><a routerLink='/product/{{product.id}}'>{{product.title}}</a></h4>
<p>{{product.desc}}</p>
</div>
<div>
<app-start startNumber={{item.rating}}></app-start>
</div>
</div>
</div>
- 在App的css中設(shè)置輪播圖組件和產(chǎn)品列表組件的間距
.carousel-container{
margin-bottom: 40px;
}
10.星級評價(jià)star組件，使用bootstrap樣式調(diào)用實(shí)心的星星，空心的星星，兩個(gè)樣式，首先顯示5個(gè)星，在ts中定義數(shù)組，使用*ngFor循環(huán)調(diào)用這個(gè)布爾數(shù)組總共顯示五次
export class StartComponent implements OnInit {
private stars:boolean[];
constructor() {
}
ngOnInit() {
this.stars=[true,true,true,true,true]
}
}
- 使用屬性綁定使能以分別顯示不同的空實(shí)心[class.glyphicon-star-empty]
<p>
<span *ngFor="let star of stars;let i=index" class="glyphicon glyphicon-star glyphicon-star-empty"
[class.glyphicon-star-empty]="star"
></span>
</p>
- 將商品的數(shù)據(jù)傳遞給星級評價(jià)組件，使用組件的輸入屬性裝飾器@Input
@Input()
private rating:number=0;
<span>{{rating}}星</span>
- 由于在商品組件中調(diào)用了star組件，所以可以使用屬性綁定獲取商品的信息傳遞到定義的rating讓star組件使用
<div>
<app-start [rating]="product.rating" ]></app-start>
</div>
- 根據(jù)商品的星級（number）決定星星是否為空（boolean），根據(jù)傳入的數(shù)來決定false的個(gè)數(shù)（false為黑星）（例如3.5有3個(gè)false）
ngOnInit() {
this.stars=[];
for (let i=1;i<=5;i++) {
this.stars.push(i>this.rating);
}
}
