本文共 6883 字，大约阅读时间需要 22 分钟。

 Angular 开发要有组件思想

通过分析可以将 本程序分为7个组件

其中app 就是自带的那个 我们不用创建

可以在项目目录下 cmd下使用

ng g component 组件名称命令

创建组件

组件名分别为 search navbar footer carousel product starts

创建完整后可以看到app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { NavbarComponent } from './navbar/navbar.component';import { FooterComponent } from './footer/footer.component';import { CarouselComponent } from './carousel/carousel.component';import { ProductComponent } from './product/product.component';import { StarsComponent } from './stars/stars.component';import { SearchComponent } from './search/search.component';@NgModule({  declarations: [    AppComponent,    NavbarComponent,    FooterComponent,    CarouselComponent,    ProductComponent,    StarsComponent,    SearchComponent  ],  imports: [    BrowserModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

开发app组件

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

效果如下

开发 navbar 和footer.

我们只需编辑  navbar 对应的 navbar.component.html即可

此处遇到了些坑

<nav class="navbar navbar-inverse navbar-fixed-top"><div class="container">  <div class="navbar-header">    <button class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">      <span class="sr-only">切换导航</span>                <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" id="example-navbar-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 下面添加这句话

body{  padding-top: 70px;}

编写footer.component.html

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

search.component.html 编写serarch

<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="number" 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.component.html

<div class="carousel slide" data-ride="carppisel">  <ol class="carousel-indicators">    <li class="active"></li>    <li ></li>    <li></li>  </ol>  <div class="carousel-inner">    <div class="item active">      <img src="http://placehold.it/800x300" alt="" class="slide-image">    </div>    <div class="item">      <img src="http://placehold.it/800x300" alt="" class="slide-image">    </div>    <div class="item">      <img src="http://placehold.it/800x300" alt="" class="slide-image">    </div>  </div>  <a href="javascript:$('.carousel').carousel('prev')" class="left carousel-control">    <span class="glyphicon glyphicon-chevron-left"></span>  </a>  <a href="javascript:$('.carousel').carousel('next')" class="right carousel-control">    <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 {  public products: Array<Product>;  constructor() {  }  ngOnInit() {    this.products = [      new Product(1, '第一商品', 1.99, 3.55, '这是一个商品，是我再学习Angular入门到项目时创建的', [ '电子产品', '硬件设备']),      new Product(2, '第二商品', 2.99, 2.55, '这是二个商品，是我再学习Angular入门到项目时创建的', [ '电子产品']),      new Product(3, '第三商品', 3.99, 1.55, '这是三个商品，是我再学习Angular入门到项目时创建的', [  '硬件设备']),      new Product(4, '第四商品', 4.99, 4.55, '这是四个商品，是我再学习Angular入门到项目时创建的', [ '办公设施', '学习资源']),      new Product(5, '第五商品', 5.99, 5.55, '这是五个商品，是我再学习Angular入门到项目时创建的', [ '办公设施']),      new Product(6, '第六商品', 6.99, 7.55, '这是六个商品，是我再学习Angular入门到项目时创建的', [ '学习资源'])    ];    this.products.push(new Product(7, '第七商品', 7.99, 7.55, '这是七个商品，是我再学习Angular入门到项目时创建的', [ '新增资源']));  }}export class Product {  constructor(public id: number,              public title: string,              public price: number,              public rating: number,              public desc: string,              public categirues: 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="http://placehold.it/320x150" alt="">    <div class="caption">      <h4 class="pull-right">{  {product.price}}元</h4>      <h4><a href="#">{  {product.title}}</a></h4>      <p>{  {product.desc}}</p>    </div>    <div>      <app-stars></app-stars>    </div>  </div></div>

为了美观 我们在app.component.html 下增加一点margin-bottom

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

 stars 组件开发

数据需要从Product中取出来 然后放到starts 中 所以 第一步 给之前的product.component.html   

app-starts组件那句话修改为

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

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 {  public starts: boolean[];  @Input()  public rating = 0;  constructor() {  }  ngOnInit() {    // this.starts = [false, false, true, true, true];    this.starts = [];    for (let i = 1; i <= 5; i++) {      this.starts.push(i > this.rating);    }  }}

stars.component.html

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

至此 效果就如下图所示了

 如果感觉自己动手有困难 

可以下载源码查看 下载地址如下

https://download.csdn.net/download/mp624183768/10688832