零、用到的Angular指令 

    示例： *ngFor="let star of stars"

一、修改app.component.html

<app-navbar></app-navbar>
<div class="container"><div class="row"><div class="col-md-3"><app-search></app-search></div><div class="col-md-9"><div class="row carousel-container"><app-carousel></app-carousel></div><div class="row"><app-product></app-product></div></div></div>
</div>
<app-footer></app-footer>

二、修改app.component.css

.carousel-container {margin-bottom: 40px;
}

三、效果图

四、carousel.component.html

<div class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li class="active"></li><li></li><li></li></ol><div class="carousel-inner"><div class="item active"><img class="slide-image" src="http://placehold.it/800x300" alt=""></div><div class="item"><img class="slide-image" src="http://placehold.it/800x300" alt=""></div><div class="item"><img class="slide-image" src="http://placehold.it/800x300" alt=""></div></div><a class="left carousel-control" href="javascript:$('.carousel').carousel('prev')"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="javascript:$('.carousel').carousel('next')"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

五、carousel.component.css

.slide-image {width: 100%;
}

六、footer.component.html

<div class="container"><hr><footer><div class="row"><div class="col-lg-12"><p>demo 联系页面</p></div></div></footer>
</div>

七、navbar.component.html

<nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-exl-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">在线竞拍</a></div><div class="collapse navbar-collapse navbar-exl-collapse"><ul class="nav navbar-nav"><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li><li><a href="#">网站地图</a></li></ul></div></div>
</nav>

八、search.component.html

<form name="searchForm" role="form"><div class="form-group"><label for="productTitle">商品名称:</label><input type="text" id="productTitle" placeholder="商品名称" class="form-control"></div><div class="form-group"><label for="productPrice">商品价格:</label><input type="text" id="productPrice" placeholder="商品价格" class="form-control"></div><div class="form-group"><label for="productCategory">商品类别:</label><input type="text" id="productCategory" placeholder="商品类别" class="form-control"></div><div class="form-group"><button type="submit" class="btn btn-primary btn-block">搜索</button></div>
</form>

九、product.component.html

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4"><div class="thumbnail"><img src="http://placehold.it/320x150"><div class="caption"><h4 class="pull-right">{{product.price}}元</h4><h4><a>{{product.title}}</a></h4><p>{{product.desc}}</p></div><div><app-stars [rating] = "product.rating"></app-stars></div></div>
</div>

十、product.component.ts

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-product',templateUrl: './product.component.html',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {private products: Array<Product>;constructor() { }ngOnInit() {this.products = [new Product(1, '第一个商品', 1.99, 1, 'angular demo', ['电子产品', '硬件设备']),new Product(2, '第二个商品', 1.99, 2, 'angular demo', ['电子产品', '硬件设备']),new Product(3, '第三个商品', 1.99, 3, 'angular demo', ['电子产品', '硬件设备']),new Product(4, '第四个商品', 1.99, 4, 'angular demo', ['电子产品', '硬件设备']),new Product(5, '第五个商品', 1.99, 3, 'angular demo', ['电子产品', '硬件设备']),new Product(6, '第六个商品', 1.99, 5, 'angular demo', ['电子产品', '硬件设备'])];}}export class Product {constructor (public id: number,public title: string,public price: number,public rating: number,public desc: string,public categories: Array<string>) {}
}

十一、stars.component.html

<p><span *ngFor="let star of stars" class="glyphicon glyphicon-star"[class.glyphicon-star-empty]="star"></span>
</p>

十二、stars.component.ts

import {Component, Input, OnInit} from '@angular/core';@Component({selector: 'app-stars',templateUrl: './stars.component.html',styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit {@Input()private rating = 0;private stars: boolean[];constructor() { }ngOnInit() {this.stars = [];for (let i = 1; i <= 5; i++) {this.stars.push(i > this.rating);}}}

十三、styles.css

body {padding-top: 70px;
}

十四、访问localhost:4200 效果图