(三)、Angular4.0 开发app、carousel、footer、navbar、product、search、stars组件

零、用到的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 效果图