Angular項目-在線競拍

ng g component xxx
app html代碼：

<app-navbar></app-navbar>
<div class="container" style="padding-top: 70px">
  <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>

navbar:導航條

<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=".navabr-ex1-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 navabr-ex1-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>

footer：頁腳

<div class="container">
  <hr>
  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>慕課網Angular入門實戰</p>
      </div>
    </div>
  </footer>
</div>

search：搜索

<form class="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>
    <select id="productCategory" class="form-control"></select>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">搜索</button>
  </div>
</form>

carousel：輪播

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

product：產品
html代碼：

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <!--[src]="imgUrl"：屬性綁定-->
    <img [src]="imgUrl">
    <div class="caption">
      <!--{{product.price}}:插值表達式-->
      <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>

ts代碼：

import { Component, OnInit } from '@angular/core';
import {toBase64String} from "@angular/compiler/src/output/source_map";

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private products: Array<Product>;
  private imgUrl = 'http://placehold.it/320x150';
  constructor() { }

  ngOnInit() {
    /* 生命週期鉤子
    *  組件實例化後，方法被調用一次
    *  初始化組件數據
    * */
    this.products = [
      new Product(1, '第一個商品', 1.99, 2.5, '這是第一個商品', ['電子產品', '硬件設備']),
      new Product(2, '第二個商品', 2.99, 3.5, '這是第二個商品', ['圖書']),
      new Product(3, '第三個商品', 3.99, 4.5, '這是第三個商品', ['硬件設備']),
      new Product(4, '第四個商品', 4.99, 3.5, '這是第四個商品', ['電子產品', '硬件設備']),
      new Product(5, '第五個商品', 5.99, 2.5, '這是第五個商品', ['電子產品']),
      new Product(6, '第六個商品', 6.99, 3.5, '這是第六個商品', ['圖書'])
    ];
  }

}
export class Product {
  constructor(
    public id: number,
    public title: string,
    public price: number,
    public rating: number,
    public desc: string,
    public categories: Array<string>
  ) {
  }
}

stars：星級評價
html代碼：

<p>
  <!--[class.glyphicon-star-empty]="star":屬性綁定-->
  <span *ngFor="let star of stars" class="glyphicon glyphicon-star "
  [class.glyphicon-star-empty]="star"></span>
  <!--{{rating}}:插值表達式-->
  <span> {{rating}}星</span>
</p>

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: number;
  rating = 0;
  private stars: boolean[];
  constructor() { }

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

}