- 制作导航栏组件，使用了bootstrap样式使用响应式布局，在页面宽度缩小时导航栏会变成折叠式导航栏，点击有侧按钮会展开导航栏的所有导航
- 为了避免其他组件的内容被覆盖，在style.css中设置一个全局样式
.paddingtop{
padding-top: 70px;
}
- 制作一个简单的footer组件
- 制作一个表单 ，search 搜索框组件，可以根据商品的名称，价格和类别搜索（此时并没有填充数据和完成功能，只设计出一个样式）
- 制作一个轮播图组件
- 商品列表组件，使用ts封装一个产品信息，声明产品拥有的属性id，商品名称，商品价格，商品评分，商品描述，商品类别
export class Product {
constructor(
public id:number,
public title:string,
public price:number,
public rating:number,
public desc:string,
public categories:Array
) {
}
}
- 在控制器中声明一个数组，来存放页面中展示的商品的信息数据，在ngOnInit方法中初始化数组
export class ProductComponent implements OnInit {
private products:Array;
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）
- 在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]
- 将商品的数据传递给星级评价组件，使用组件的输入属性装饰器@Input
@Input()
private rating:number=0;
{{rating}}星
- 由于在商品组件中调用了star组件，所以可以使用属性绑定获取商品的信息传递到定义的rating让star组件使用
- 根据商品的星级（number）决定星星是否为空（boolean），根据传入的数来决定false的个数（false为黑星）（例如3.5有3个false）
ngOnInit() {
this.stars=[];
for (let i=1;i<=5;i++) {
this.stars.push(i>this.rating);
}
}