Angular4-在线竞拍应用-开发组件

在线竞拍项目要开发七个组件

执行命令ng g component navbar生成导航栏组件。(这个命令的全称是ng generate component navbar)想学习Angular CLI指令可以查看README.md文档，也可以访问https://github.com/angular/angular-cli/blob/master/README.md

然后依次执行，生成其他组件

ng g component footer
ng g component search
ng g component carousel
ng g component product
ng g component stars

之后会多出几个文件夹来，然后在app.module.ts中会多出声明的那几个组件。

然后修改app.component.html，里边用了一些bootstrap的样式

<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">
        <app-carousel></app-carousel>
      </div>
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
  </div>
</div>
<app-footer></app-footer>

因为之前用的是cnpm，所以bootstrap的css不会起作用，需要在styles.css中添加@import "../node_modules/bootstrap/dist/css/bootstrap.css";。

然后启动项目，访问http://localhost:4200/

开发navbar组件

修改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-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 navbar-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>

修改styles.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
body{
  padding-top: 70px;
}

开发footer组件

修改footer.component.html

<div class="container">
  <hr>
  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>慕课网Angular入门实战2017</p>
      </div>
    </div>
  </footer>
</div>

开发search组件

修改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>
    <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组件

修改carousel.component.html

<div class="carousel slide" date-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">
    </div>
    <div class="item">
      <img class="slide-image" src="http://placehold.it/800x300">
    </div>
    <div class="item">
      <img class="slide-image" src="http://placehold.it/800x300">
    </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('prev')">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

修改carousel.component.css

.slide-image{
  width: 100%;
}

开发product组件

修改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>;

  private imageUrl= 'http://placehold.it/320x150';

  constructor() {
  }

  ngOnInit() {
    this.products = [
      new Product(1, '第一个商品', 1.99, 3.5, '这是第一个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品']),
      new Product(2, '第二个商品', 2.99, 3.5, '这是第二个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品', '硬件设备']),
      new Product(3, '第三个商品', 3.99, 3.5, '这是第三个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品']),
      new Product(4, '第四个商品', 4.99, 3.5, '这是第四个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品']),
      new Product(5, '第五个商品', 5.99, 3.5, '这是第五个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品']),
      new Product(6, '第五个商品', 6.99, 3.5, '这是第六个商品，是我在学习慕课网Angular入门实战时创建的', ['电子产品'])
    ];
  }

}

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


}

修改product.component.html

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <img [src]="imgUrl">
    <div class="caption">
      <h4 class="pull-right">{{product.price}}元</h4>
      <h4><a>{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <app-stars></app-stars>
    </div>
  </div>
</div>

添加一个样式让轮播图和产品之间空隙增加，修改app.component.css

.carousel-container{
  margin-bottom: 40px;
}

修改app.component.html

<div class="row carousel-container">
  <app-carousel></app-carousel>
</div>

ngFor指令：会把指令所在的元素，和这个元素中的子元素显示几遍，显示的次数，根据数组中元素的个数而定。

{{}}差值表达式

属性绑定：把html元素的属性和组件的属性绑定起来。

 <img [src]="imageUrl">
 private imageUrl= 'http://placehold.it/320x150';

开发stars组件

修改stars.component.ts

import {Component, OnInit, Input} 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);

    }
  }

}

修改stars.component.html

<p>
  <span *ngFor="let star of stars" class="glyphicon glyphicon-star" [class.glyphicon-star-empty]="star"></span>
  <span>{{rating}}</span>
</p>

修改product.component.html

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