Angular——在线竞拍demo

红太狼 2022-05-27 13:15 121阅读 0赞

因为是用angular开发“在线竞拍”主页面，所以就利用组件化的思想，先把主界面划分为7个组件，分别为：导航栏、搜索列表、产品信息、轮播图、脚注、星级评价，界面图片和每个组件的详细设计如下！  
  
![这里写图片描述][70]

# <table>   <tbody>    <tr>     <td align="left"><font>*导航栏</font></td>    </tr>   </tbody>  </table> #

1.逻辑  
  
  此导航条是响应式的，当屏幕缩小，导航栏中的三个链接会消失掉，多出一个按钮来，点击按钮，三个链接会按下拉的方式呈现出来。设置导航条主要是bootstrap的一些样式，和angular关系不大。  
  
2.代码:（**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>

3.效果图  
  
![屏幕最大][70 1]  
![屏幕缩小][70 2]

# <table>   <tbody>    <tr>     <td align="left"><font>*脚注</font></td>    </tr>   </tbody>  </table> #

脚注部分很简单，就是在页面底部显示的程序小说明，代码（footer.component.html）如下

<div class="container">
      <hr>
      <footer>
        <div class="row">
          <div class="col-lg-12">
            <p>angular学习之旅中的小demo</p>
          </div>
        </div>
      </footer>
    </div>

# <table>   <tbody>    <tr>     <td align="left"><font>*搜索表单</font></td>    </tr>   </tbody>  </table> #

搜索表单这部分也没涉及到angular的知识，主要就是添加三个搜索框，让分别可以按商品名称、商品价格、商品类别进行搜索，代码（search.component.html）如下：

# <table>   <tbody>    <tr>     <td align="left"><font>*产品列表</font></td>    </tr>   </tbody>  </table> #

1.后台:  
①定义对象:  
  从此组件就开始涉及angular啦，所以写之前先理思路，因为我们是在用typescript写程序，所以需要有一个对象来封装我的产品信息，这个对象有一个构造函数，在构造函数声明产品所需要的构造属性  
②声明数组:  
  在ProductComponent控制器中声明一个数组存储页面上展示商品信息的数据；然后在ngOnInit()方法实例化数组，是组件生命周期钩子中的一个钩子，这个方法会在组件被实例化后调用一次，初始化组件中的数据。

import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-product',
      templateUrl: './product.component.html',
      styleUrls: ['./product.component.css']
    })
    export class ProductComponent implements OnInit {
    
      //private imgUrl='http://placehold.it/320x150';
    
      //ProductComponent控制器中：声明一个数组存储页面上展示商品信息的数据
      private products:Array<Product>;
    
      constructor() { }
      
      //ngOnInit()方法是组件生命周期钩子中的一个钩子，这个方法会在组件被实例化后调用一次，初始化组件中的数据
      ngOnInit() {
        //初始化数组
        this.products=[
          new Product(1,"第一个商品",1.99,3.5,"这是第一个商品，是我在学习angular时创建的",["电子产品","硬件设备"]),
          new Product(2,"第二个商品",2.99,2.5,"这是第二个商品，是我在学习angular时创建的",["图书","硬件设备"]),
          new Product(3,"第三个商品",3.99,4.5,"这是第三个商品，是我在学习angular时创建的",["电子产品","硬件设备"]),
          new Product(4,"第四个商品",4.99,1.5,"这是第四个商品，是我在学习angular时创建的",["电子产品"]),
          new Product(5,"第五个商品",5.99,3.5,"这是第五个商品，是我在学习angular时创建的",["电子产品","硬件设备"]),
          new Product(6,"第六个商品",6.99,2.5,"这是第六个商品，是我在学习angular时创建的",["图书","硬件设备"])
        ]
      }
    
    }
    
    //封装产品信息
    export class Product{
      constructor(
        //商品id
        public id:number,
        //商品名称
        public title:string,
        //商品价格
        public price:number,
        //星级评价
        public rating:number,
        //商品描述
        public desc:string,
        //商品类别:数组型
        public categories:Array<string>
      ){
    
      }
    }

2.前台:

<div  *ngFor="let product of products" class="col-md-4 col-md-4 col-md-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>

3.知识点  
◆**ngOnInit()方法**  
  ngOnInit()方法是组件生命周期钩子中的一个钩子，这个方法会在组件被实例化后调用一次，初始化组件中的数据  
◆**ngFor命令**

*ngFor="let product of products"

**含义**：循环products属性，把每次循环的元素放到product变量里。中间那段HTML里就可以使用product这个变量，可以用插值表达式显示product里的一些属性。  
  **作用**：循环一个数组，在页面上反复生成一段html

**语法**：**let 变量 of 后台数组**

# <table>   <tbody>    <tr>     <td align="left"><font>*星级评价</font></td>    </tr>   </tbody>  </table> #

星级评价组件设置主要要解决6个问题，所以下边就根据解决的问题来讲解这部分。  
1、如何显示星型？

2、如何显示空心的星型？

3、如何显示5颗星？  
  解决此问题就要用数据驱动页面啦，其核心思想就是——**要想在前台页面显示5颗星，就要在后台有一个包含5个元素的数组**  
  ◆后台（stars.component.ts）代码

export class StarsComponent implements OnInit {
      //定义一个Boolean类型的数组：装5颗星
      private stars:boolean[];
    
      constructor() { }
    
      ngOnInit() {
        //初始化数组
        this.stars=[true,true,true,true,true];
      }
    }

◆前台（stars.component.html）代码——即用ngFor命令绑定后台数组

4、如何让5颗星中有的实有的空？  
  解决此问题使用属性绑定中的**样式绑定**，到第四步此时前台（stars.component.html）代码如下：

**◆样式绑定**  
  ◇样式绑定是属性绑定中的一种  
  ◇ \[class.glyphicon-star-empty\]="star"解析：  
  class后边绑定的东西是一个css样式，它的值要绑定到当前star变量上  
  ◇上面整句代码含义：  
  span这个html元素是否出现这样一个css样式是由star这个属性决定的，如果star是true那么span元素就会多出这个样式来，false就不会出现这个样式

5、如何将商品的星级评价的数值传递给星级评价组件?    此问题涉及到了两个组件（产品product和星级评价stars）,要把产品组件的星级值传递给心机评价组件告诉星型哪些空哪些实！使用\*\*“组件的输入属性”\*\*先在后台添加装饰器，然后再定义属性；前台则用插值表达式绑定  
   ◆星级评价组件：主要使用\*\*“组件的输入属性”\*\*先在后台添加装饰器，然后再定义属性；前台则用\*\*“插值表达式”\*\*绑定

◇后台（stars.component.ts）代码：

//加一个input装饰器:星级评价组件StarsComponent的rating属性应该由它的父组件传递给它
    @Input()
    //定义一个属性：用来接收产品组件传给它的星级评价数值，默认值是0
    private rating:number=0;

◇前台（stars.component.html）代码：

<span>{
       {rating}}星</span>

◆产品的前台：用属性绑定

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

6、如何根据商品的星级值来决定星型是空心的还是实心的？/font>   此问题其实就是把第3步中写死的值不写死，而是根据传进来的rating来判断是true还是false，修改星级评价后台 \`\`\` ngOnInit() \{ this.stars=\[\]; for(let i=1;i<=5;i++)\{ this.stars.push(i>this.rating);

}
    //初始化数组
    //this.stars=[false,false,true,true,true];

<font size="5px" face="楷体">7、星级评价整体代码</font> 
    <font size="5px" face="楷体">◇前台代码</font>

\{ \{rating\}\}星

\`\`\`

◇后台代码

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装饰器:星级评价组件StarsComponent的rating属性应该由它的父组件传递给它
      @Input()
      //定义一个属性：用来接收产品组件传给它的星级评价数值，默认值是0
      private rating:number=0;
    
      //定义一个Boolean类型的数组：装5颗星
      private stars:boolean[];
    
      constructor() { }
    
      ngOnInit() {
        this.stars=[];
        for(let i=1;i<=5;i++){
          this.stars.push(i>this.rating);
    
        }
        //初始化数组
        //this.stars=[false,false,true,true,true];
      }
    
    }

[70]: /images/20220527/950b988a003d42bf91c6bc39951ede93.png
[70 1]: /images/20220527/82b1a3f1b1d74f6d8158d6a0a8d45fb3.png
[70 2]: /images/20220527/36b5ecc5a9f94ad48422f493b55fc64a.png