(三)、Angular4.0 开发app、carousel、footer、navbar、product、search、stars组件

系统管理员 2022-05-29 12:14 45阅读 0赞

零、用到的Angular指令

示例： \*ngFor="let star of stars"

一、修改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 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;
    }

三、效果图

![2018032318004871][]

四、carousel.component.html

五、carousel.component.css

.slide-image {
      width: 100%;
    }

六、footer.component.html

七、navbar.component.html

八、search.component.html

九、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">
        <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>

十、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>;
    
      constructor() { }
    
      ngOnInit() {
        this.products = [
          new Product(1, '第一个商品', 1.99, 1, 'angular demo', ['电子产品', '硬件设备']),
          new Product(2, '第二个商品', 1.99, 2, 'angular demo', ['电子产品', '硬件设备']),
          new Product(3, '第三个商品', 1.99, 3, 'angular demo', ['电子产品', '硬件设备']),
          new Product(4, '第四个商品', 1.99, 4, 'angular demo', ['电子产品', '硬件设备']),
          new Product(5, '第五个商品', 1.99, 3, 'angular demo', ['电子产品', '硬件设备']),
          new Product(6, '第六个商品', 1.99, 5, 'angular demo', ['电子产品', '硬件设备'])
        ];
      }
    
    }
    
    export class Product {
      constructor (public id: number,
                   public title: string,
                   public price: number,
                   public rating: number,
                   public desc: string,
                   public categories: Array<string>) {
      }
    }

十一、stars.component.html

十二、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 {
    
      @Input()
      private rating = 0;
    
      private stars: boolean[];
    
      constructor() { }
    
      ngOnInit() {
    
        this.stars = [];
        for (let i = 1; i <= 5; i++) {
          this.stars.push(i > this.rating);
        }
    
      }
    
    }

十三、styles.css

body {
      padding-top: 70px;
    }

十四、访问localhost:4200 效果图

![20180326155152927][]

[2018032318004871]: /images/20220529/891a1e937f0546248b22ecdb65b7849b.png
[20180326155152927]: /images/20220529/3b5d7b3130e94be0aba17b7b3fe9ae03.png