评价信息追加

最新推荐文章于 2024-04-28 17:28:58 发布

原创最新推荐文章于 2024-04-28 17:28:58 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

38 篇文章

订阅专栏

本文主要探讨了产品模块的代码组织结构，包括product.service.ts的服务实现，product HTML和TS文件的视图及逻辑处理，以及productDetail HTML和ProductDetail TS在详情页的应用，最后提到了app Model.TS中的数据模型设计。

1.product.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private products: Product[] = [
    new Product(1, '大碗茶1', 1.99, 1.1, '这是一个值得买的藏品1', ['瓷器1', '明清代1']),
    new Product(2, '大碗茶2', 2.99, 2.2, '这是一个值得买的藏品2', ['瓷器2', '明清代2']),
    new Product(3, '大碗茶3', 3.99, 3.3, '这是一个值得买的藏品3', ['瓷器3']),
    new Product(4, '大碗茶4', 4.99, 4.4, '这是一个值得买的藏品4', ['瓷器1', '明清代1']),
    new Product(5, '大碗茶5', 5.99, 5.5, '这是一个值得买的藏品5', ['瓷器5']),
    new Product(6, '大碗茶6', 6.99, 6.6, '这是一个值得买的藏品6', ['瓷器6', '明清代6'])
  ];

  private comments: Comment[] = [
    new Comment(1, 1, '20200202', '张思1', 3.4, '味道不错1'),
    new Comment(2, 1, '20200302', '张思2', 1.4, '味道不错2'),
    new Comment(3, 1, '20200402', '张思3', 2.4, '味道不错3'),
    new Comment(4, 3, '20200102', '张思4', 4.4, '味道不错4'),
  ];
  constructor() { }

  gerProducts(): Product[]{
    return this.products;
  }

  getProduct(id: number): Product{
    // tslint:disable-next-line:triple-equals
    const product1 = this.products.find((product) => product.id == id);
    console.log('kkkk' + product1.price);
    return product1;
  }

  getCommentsForProductId(productId: number): Comment[]{
    // tslint:disable-next-line:triple-equals
    return this.comments.filter((comment: Comment) => comment.productId == productId);
  }
}

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

  }
}

export class Comment{
  constructor(
    public id: number,
    public productId: number,
    public timestamp: string,
    public user: string,
    public rating: number,
    public content: string

  ) {
  }
}

2.product HTML

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

3.product TS

import { Component, OnInit } from '@angular/core';
import {Product, ProductService} from '../shared/product.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  public products: Product[];
  constructor(private productService: ProductService) { }
  public imgUrl = 'http://placehold.it/320x150';
  ngOnInit(): void {
    this.products = this.productService.gerProducts();
  }
}

4.productDetail.HTML

import { Component, OnInit } from '@angular/core';
import {Product, ProductService} from '../shared/product.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  public products: Product[];
  constructor(private productService: ProductService) { }
  public imgUrl = 'http://placehold.it/320x150';
  ngOnInit(): void {
    this.products = this.productService.gerProducts();
  }
}

5.ProductDetail TS

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Product, ProductService, Comment} from '../shared/product.service';

// noinspection TypeScriptValidateTypes
@Component({
  selector: 'app-productdetail',
  templateUrl: './productdetail.component.html',
  styleUrls: ['./productdetail.component.css']
})
export class ProductdetailComponent implements OnInit {
  public product: Product;
  public comments: Comment[];
  constructor( private routeInfo: ActivatedRoute,
               private productService: ProductService) { }

  ngOnInit(): void {
    const productId: number = this.routeInfo.snapshot.params.productId;
    console.log(productId);
   //  const productId: number = this.routeInfo.snapshot.params["productId"];
    this.product = this.productService.getProduct(productId);
    this.comments = this.productService.getCommentsForProductId(productId);
    console.log('----' + this.product.id);
    console.log(this.product.title);
  }
}

7.app Model.TS

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { SearchComponent } from './search/search.component';
import { CarouselComponent } from './carousel/carousel.component';
import { ProductComponent } from './product/product.component';
import { StarsComponent } from './stars/stars.component';
import { ProductdetailComponent } from './productdetail/productdetail.component';
import { HomeComponent } from './home/home.component';
import {RouterModule, Routes} from '@angular/router';
import {ProductService} from './shared/product.service';


const routeConfig: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product/:productId', component: ProductdetailComponent}
];
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    CarouselComponent,
    ProductComponent,
    StarsComponent,
    ProductdetailComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    // 把路由注入到主模块
    RouterModule.forRoot(routeConfig)

    // RouterModule.forChild(routeConfig);
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }