评价信息追加

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