改造在线竞拍二
1.生成服务,并在模块中声明
–> ng g service shared/product
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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 './product-detail/product-detail.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,
/*主模块注入路由配置*/
RouterModule.forRoot(routeConfig)
],
/*1.服务声明在模块中*/
providers: [ProductService],
bootstrap: [AppComponent]
})
export class AppModule { }
2.product.service.ts
定义:
两个类:Product,Comment
三个方法:getProducts(),getProduct(id: number),getCommentsForProductId(id: number)
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ProductService {
/* 初始化服务数据
*/
private products: Product[] = [
new Product(1, '第一个商品', 1.99, 2.5, '这是第一个商品', ['电子产品', '硬件设备']),
new Product(2, '第二个商品', 2.99, 3.5, '这是第二个商品', ['图书']),
new Product(3, '第三个商品', 3.99, 4.5, '这是第三个商品', ['硬件设备']),
new Product(4, '第四个商品', 4.99, 3.5, '这是第四个商品', ['电子产品', '硬件设备']),
new Product(5, '第五个商品', 5.99, 2.5, '这是第五个商品', ['电子产品']),
new Product(6, '第六个商品', 6.99, 3.5, '这是第六个商品', ['图书'])
];
private comments: Comment[] = [
new Comment(1, 1, '2017-02-02 22:22:22', '张三', 3, '东西不错'),
new Comment(2, 1, '2017-03-02 22:22:22', '李四', 4, '东西挺不错'),
new Comment(3, 1, '2017-04-02 22:22:22', '王五', 2, '东西还行'),
new Comment(4, 2, '2017-04-02 22:22:22', '赵六', 3, '东西挺好'),
new Comment(5, 2, '2017-05-02 22:22:22', '孙七', 2, '东西一般'),
]
constructor() { }
getProducts(): Product[] {
return this.products;
}
getProduct(id: number): Product {
return this.products.find((product) => product.id == id );
}
getCommentsForProductId(id: number): Comment[] {
return this.comments.filter((comment: Comment) => comment.productId == id);
}
}
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
) {
}
}
3.商品列表
product.component.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 {
private products: Product[];
private imgUrl = 'http://placehold.it/320x150';
/*2.注入服务*/
constructor(private productService: ProductService) { }
/*3.调用方法获得商品*/
ngOnInit() {
this.products = this.productService.getProducts();
}
}
product.component.html
<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
<div class="thumbnail">
<!--[src]="imgUrl":属性绑定-->
<img [src]="imgUrl">
<div class="caption">
<!--{{product.price}}:插值表达式-->
<h4 class="pull-right">{{product.price}}元</h4>
<!--1.修改路由链接-->
<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>
4.商品详情
product-detail.component.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Comment, Product, ProductService} from '../shared/product.service';
@Component({
selector: 'app-product-detail',
templateUrl: './product-detail.component.html',
styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
/*1.声明本地属性*/
product: Product;
comments: Comment[];
constructor(private routeInfo: ActivatedRoute,
private productService: ProductService) { }
ngOnInit() {
/*2.从参数快照中获得商品id*/
const productId: number = this.routeInfo.snapshot.params['productId'];
/*3.调用方法获得商品*/
this.product = this.productService.getProduct(productId);
/*4.调用方法获取评论*/
this.comments = this.productService.getCommentsForProductId(productId);
}
}
product-detail.component.html
<div class="thumbnail">
<img src="http://placehold.it/820x230"/>
<div>
<h4 class="pull-right">{{product.price}}元</h4>
<h4>{{product.title}}</h4>
<h4>{{product.desc}}</h4>
</div>
<div>
<p class="pull-right">{{comments.length}}</p>
<p>
<app-stars [rating]="product.rating"></app-stars>
</p>
</div>
</div>
<div class="well">
<div class="row" *ngFor="let comment of comments">
<hr>
<div class="col-md-12">
<app-stars [rating]="comment.rating"></app-stars>
<span>{{comment.user}}</span>
<span class="pull-right">{{comment.timestamp}}</span>
<p></p>
<p>{{comment.content}}</p>
</div>
</div>
</div>