子组件

1. 制作导航栏组件，使用了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>

2. 为了避免其他组件的内容被覆盖，在style.css中设置一个全局样式

.paddingtop{
    padding-top: 70px;
}

3. 制作一个简单的footer组件

<div class="container">
  <hr>
  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>这是一个angular做的APP</p>
      </div>
    </div>
  </footer>
</div>

4. 制作一个表单 ，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>

5. 制作一个轮播图组件

<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>

6. 商品列表组件，使用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>
  ) {

  }
  }

7. 在控制器中声明一个数组，来存放页面中展示的商品的信息数据，在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,"这是 第一个商品的描述",["图书"]),
    ]
  }
}

8. 商品列表的样式，使用*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>

9. 在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]
  }
}

11. 使用属性绑定使能以分别显示不同的空实心[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>

12. 将商品的数据传递给星级评价组件，使用组件的输入属性装饰器@Input

@Input()
private rating:number=0;

<span>{{rating}}星</span>

13. 由于在商品组件中调用了star组件，所以可以使用属性绑定获取商品的信息传递到定义的rating让star组件使用

<div>
  <app-start [rating]="product.rating" ]></app-start>
</div>

14. 根据商品的星级（number）决定星星是否为空（boolean），根据传入的数来决定false的个数（false为黑星）（例如3.5有3个false）

  ngOnInit() {
    this.stars=[];
    for  (let i=1;i<=5;i++) {
      this.stars.push(i>this.rating);
    } 
  
}