Angular4.0_Auction项目依赖注入

重构Auction步骤

• 编写ProductService.包含3个方法&＃xff1a;getProducts(),getProducts(id)以及getCommentsForProduct(id)

ng g service shared/product

product.service.ts

import {Injectable} from &＃39;&＃64;angular/core&＃39;;&＃64;Injectable({providedIn: &＃39;root&＃39;
})
export class ProductService {private products: Product[] &＃61; [new Product(1, &＃39;第一个商品&＃39;, 1.99, 3.5, "这是第一商品&＃xff0c;随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "硬件设备", "其他"]),new Product(2, &＃39;第二个商品&＃39;, 2.99, 2.5, "这是第二商品&＃xff0c;随便是到手京东卡是你的拉克丝等你拉屎的", ["硬件设备", "其他"]),new Product(3, &＃39;第三个商品&＃39;, 3.99, 1.5, "这是第三商品&＃xff0c;随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "硬件设备"]),new Product(4, &＃39;第四个商品&＃39;, 4.99, 2.0, "这是第四商品&＃xff0c;随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "其他"]),new Product(5, &＃39;第五个商品&＃39;, 5.99, 3.5, "这是第五商品&＃xff0c;随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "硬件设备", "其他"]),new Product(6, &＃39;第六个商品&＃39;, 6.99, 4.5, "这是第六商品&＃xff0c;随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "硬件设备", "其他"])];private comments:Comment[] &＃61; [new Comment(1,1,"2017-02-02 22:22:22","张三",3,"东西不错"),new Comment(2,1,"2017-03-02 23:22:22","李四",4,"东西挺不错"),new Comment(3,1,"2017-04-02 24:22:22","王五",2,"东西不错"),new Comment(4,1,"2017-05-02 25:22:22","赵六",1,"东西还不错"),new Comment(5,1,"2017-06-02 26:22:22","哈哈",3,"东西不错"),]constructor() {}getProducts():Product[] {return this.products;}getProduct(id:number):Product{return this.products.find((product) &＃61;> product.id &＃61;&＃61; id);}getCommentsForProductId(id:number):Comment[]{return this.comments.filter((comment:Comment) &＃61;> comment.productId &＃61;&＃61; 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){}
}

• 修改路由配置。在从商品列表进入商品详情时&＃xff0c;不再传递商品名称&＃xff0c;改为传递商品ID。

修改app.module.ts

原来传的是productTitle&＃xff0c;修改为productId

const routeConfig:Routes &＃61; [{path:&＃39;&＃39;,component:HomeComponent},{path:&＃39;product/:productId&＃39;,component:ProductDetailComponent}
]

修改product.component.html&＃xff0c;也改为id

<div *ngFor&＃61;"let product of products" class&＃61;"col-md-4 col-sm-4 col-lg-4"><div class&＃61;"thumbnail"><img [src]&＃61;"imgUrl"><div class&＃61;"caption"><h4 class&＃61;"pull-right">{{product.price}}元h4><h4><a [routerLink]&＃61;"[&＃39;/product&＃39;,product.id]">{{product.title}}a>h4><p>{{product.desc}}p>div><div><app-stars [rating]&＃61;"product.rating">app-stars>div>div>
div>


product-detail.component.ts

import { Component, OnInit } from &＃39;&＃64;angular/core&＃39;;
import {ActivatedRoute} from "&＃64;angular/router";
import {Product} from "../shared/product.service";&＃64;Component({selector: &＃39;app-product-detail&＃39;,templateUrl: &＃39;./product-detail.component.html&＃39;,styleUrls: [&＃39;./product-detail.component.css&＃39;]
})
export class ProductDetailComponent implements OnInit {product:Product;constructor(private routeInfo:ActivatedRoute) { }ngOnInit() {let productId:number &＃61; this.routeInfo.snapshot.params["productId"];}}


• 注入ProductService并使用其服务。

首先在app.module.ts中的providers: [ProductService],来声明这个服务。
然后在product.component.ts中注入ProductService&＃xff0c;并通过ProductService来获取Products

import { Component, OnInit } from &＃39;&＃64;angular/core&＃39;;
import {ProductService} from "../shared/product.service";&＃64;Component({selector: &＃39;app-product&＃39;,templateUrl: &＃39;./product.component.html&＃39;,styleUrls: [&＃39;./product.component.css&＃39;]
})
export class ProductComponent implements OnInit {private products:Product[];private imgUrl &＃61; &＃39;http://placehold.it/320x150&＃39;;constructor(private productService:ProductService) { }ngOnInit() {this.products &＃61; this.productService.getProducts();}}


product-detail.component.ts

import { Component, OnInit } from &＃39;&＃64;angular/core&＃39;;
import {ActivatedRoute} from "&＃64;angular/router";
import {Product, ProductService} from "../shared/product.service";&＃64;Component({selector: &＃39;app-product-detail&＃39;,templateUrl: &＃39;./product-detail.component.html&＃39;,styleUrls: [&＃39;./product-detail.component.css&＃39;]
})
export class ProductDetailComponent implements OnInit {product:Product;constructor(private routeInfo:ActivatedRoute,private productService:ProductService) { }ngOnInit() {let productId:number &＃61; this.routeInfo.snapshot.params["productId"];this.product &＃61; this.productService.getProduct(productId);}}

product-detail.component.html

<div class&＃61;"thumbnail"><img src&＃61;"http://placehold.it/820x230"><div><h4 class&＃61;"pull-right">{{product.price}}元h4><h4>{{product.title}}h4><p>{{product.desc}}p>div>div>

完成了商品详情跳转及展示&＃xff0c;接下来处理商品评论

product-detail.component.ts

import {Component, OnInit} from &＃39;&＃64;angular/core&＃39;;
import {ActivatedRoute} from "&＃64;angular/router";
import {Product, ProductService, Comment} from "../shared/product.service";&＃64;Component({selector: &＃39;app-product-detail&＃39;,templateUrl: &＃39;./product-detail.component.html&＃39;,styleUrls: [&＃39;./product-detail.component.css&＃39;]
})
export class ProductDetailComponent implements OnInit {product: Product;comments: Comment[];constructor(private routeInfo: ActivatedRoute,private productService: ProductService) {}ngOnInit() {let productId: number &＃61; this.routeInfo.snapshot.params["productId"];this.product &＃61; this.productService.getProduct(productId);this.comments &＃61; this.productService.getCommentsForProductId(productId);}}


product-detail.component.html

<div class&＃61;"thumbnail"><img src&＃61;"http://placehold.it/820x230"><div><h4 class&＃61;"pull-right">{{product.price}}元h4><h4>{{product.title}}h4><p>{{product.desc}}p>div><div><p class&＃61;"pull-right">评论&＃xff1a;{{comments.length}}p><p><app-stars [rating]&＃61;"product.rating">app-stars>p>div>
div><div class&＃61;"well"><div class&＃61;"row" *ngFor&＃61;"let comment of comments"><hr><div class&＃61;"col-md-12"><app-stars [rating]&＃61;"comment.rating">app-stars><span>{{comment.user}}span><span class&＃61;"pull-right">{{comment.timestamp}}span><p>p><p>{{comment.content}}p>div>div>
div>

gitHub参考代码