马上就写完了，后期还要有大量更改，有看不懂的地方，直接评论。—— 马丁路德.东
给get请求添加请求数据
因为我们得到原始搜索条件和渲染数据的组件不是一个，我们选用一个公共服务作为中间人。
（一）我们在公共服务中添加方法，（完成得到数据和发起请求的功能）
1.定义搜索条件的格式
export class ProductSearchParams{
constructor(
public title: string,
public price: number,
public category: string
){}
}
2.发起HTTP请求
search(params: ProductSearchParams): Observable<Product[]>{
return this.http.get('/api/products', {search:this.encodeParams(params)}).map(res => res.json());
}
3.整理搜索条件(es6新语法)
private encodeParams(params: ProductSearchParams) {
return Object.keys(params)
.filter(key => params[key])
.reduce((sum: URLSearchParams, key:string) => {
sum.append(key, params[key]);
return sum;
}, new URLSearchParams());
}
4.在服务中定义一个事件流，以供双方使用
searchEvent:EventEmitter<ProductSearchParams> = new EventEmitter();
（二）在需要渲染数据的地方，订阅此流(使用查询参数调取搜索方法，得到数据)
export class ProductComponent implements OnInit {
private products: Observable<Product[]>;
constructor( private productService: ProductService) { }
ngOnInit() {
this.products=this.productService.getProducts();
this.productService.searchEvent.subscribe( params => this.products = this.productService.search(params)
);
}
}
（三）表单组建发送事件(表单得到的数据类型，和http所需要的查询参数格式，是完全一致的)
onSearch(){
if(this.formModel.valid){
console.log(this.formModel.value);
this.productServecie.searchEvent.emit(this.formModel.value);
}
}
(四)服务器端代码思想实现搜索(“-1”代表所有类型)
app.get('/api/products',(req,res)=>{
let result = products;
console.log("服务器已经接受到了商品列表请求");
let params = req.query;
if(params.title){
result = result.filter((p) => p.title.indexOf(params.title) !== -1)
}
if(params.price && result.length){
result = result.filter((p) => p.price <=parseInt(params.price));
}
console.log(params.category);
if(params.category !== "-1" && result.length){
result = result.filter((p) => p.categories.indexOf(params.category) !== -1)
}
res.json(result);
});
