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

Dear 丶 2022-06-05 21:16 224阅读 0赞

在线竞拍项目要开发七个组件  
![这里写图片描述][SouthEast]

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

![这里写图片描述][SouthEast 1]

## 开发navbar组件 ##

修改navbar.component.html

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

## 开发carousel组件 ##

修改carousel.component.html

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

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

[SouthEast]: /images/20220606/06ff9ef764b440ea87efc2d9834073bb.png
[https_github.com_angular_angular-cli_blob_master_README.md]: https://github.com/angular/angular-cli/blob/master/README.md
[http_localhost_4200]: http://localhost:4200/
[SouthEast 1]: /images/20220606/abf0898ad8d24828a9ecc22e6aa9d365.png