- 制作导航栏组件，使用了bootstrap样式使用响应式布局，在页面宽度缩小时导航栏会变成折叠式导航栏，点击有侧按钮会展开导航栏的所有导航
<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="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">网站地图</a></li>
</ul>
</div>
</div>
</nav>
- 为了避免其他组件的内容被覆盖，在style.css中设置一个全局样式
.paddingtop{
padding-top: 70px;
}
- 制作一个简单的footer组件
<div class="container">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>这是一个angular做的APP</p>
</div>
</div>
</footer>
</div>
- 制作一个表单 ，search 搜索框组件，可以根据商品的名称，价格和类别搜索（此时并没有填充数据和完成功能，只设计出一个样式）
<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">商品价格</label>
<input type="text" formControlName="price" id="productPrice" name="productPrice" class="form-control" placeholder="商品价格">
</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>
- 制作一个轮播图组件
<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封装一个产品信息，声明产品拥有的属性id，商品名称，商品价格，商品评分，商品描述，商品类别
export class Product {
constructor(
public id:number,
public title:string,
public price:number,
public rating:number,
public desc:string,
public categories:Array<string>
) {
}
}
- 在控制器中声明一个数组，来存放页面中展示的商品的信息数据，在ngOnInit方法中初始化数组
export class ProductComponent implements OnInit {
private products:Array<Product>;
constructor() {}
ngOnInit() {
this.products = [
new Product(1," 第一个商品",10,3.5,"这是 第一个商品的描述",["电子产品"]),
new Product(2," 第二个商品",10,3.5,"这是 第一个商品的描述",["图书"]),
new Product(3," 第三个商品",10,3.5,"这是 第一个商品的描述",["硬件设备"]),
new Product(4," 第四个商品",10,3.5,"这是 第一个商品的描述",["电子产品","硬件设备"]),
new Product(5," 第五个商品",10,3.5,"这是 第一个商品的描述",["电子产品"]),
new Product(6," 第六个商品",10,3.5,"这是 第一个商品的描述",["图书"]),
]
}
}
- 商品列表的样式，使用*ngFor循环在ts中存入商品数据的数组（类似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中设置轮播图组件和产品列表组件的间距
.carousel-container{
margin-bottom: 40px;
}
10.星级评价star组件，使用bootstrap样式调用实心的星星，空心的星星，两个样式，首先显示5个星，在ts中定义数组，使用*ngFor循环调用这个布尔数组总共显示五次
export class StartComponent implements OnInit {
private stars:boolean[];
constructor() {
}
ngOnInit() {
this.stars=[true,true,true,true,true]
}
}
- 使用属性绑定使能以分别显示不同的空实心[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>
- 将商品的数据传递给星级评价组件，使用组件的输入属性装饰器@Input
@Input()
private rating:number=0;
<span>{{rating}}星</span>
- 由于在商品组件中调用了star组件，所以可以使用属性绑定获取商品的信息传递到定义的rating让star组件使用
<div>
<app-start [rating]="product.rating" ]></app-start>
</div>
- 根据商品的星级（number）决定星星是否为空（boolean），根据传入的数来决定false的个数（false为黑星）（例如3.5有3个false）
ngOnInit() {
this.stars=[];
for (let i=1;i<=5;i++) {
this.stars.push(i>this.rating);
}
}
网友评论