9. 服务 service

1. 创建购物车服务

• 1. 生成购物车服务
     ng g service cart

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CartService {

constructor() {}
}

• 2. 定义 1 个 items 属性来把当前商品的列表存储在购物车中。
• 3. 定义把商品添加到购物车、返回购物车商品以及清除购物车商品的方法。

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CartService {
items = [];
addToCart(product) {
    this.items.push(product);
  }

  getItems() {
    return this.items;
  }

  clearCart() {
    this.items = [];
    return this.items;
  }
}
constructor() {}
}

2. 使用购物车服务

在商品详情(product-details)视图中添加一个“Buy”按钮。单击“Buy”按钮后，你将借助购物车服务来把当前商品添加到购物车中。

---

》 src/app/product-details/product-details.component.ts

---

• 1. 导入购物车服务
• 2. 注入购物车服务
• 3. 定义 addToCart() 方法，该方法会当前商品添加到购物车中
• 4. 修改商品详情模板，让它具有一个“Buy”按钮，用于把当前商品添加到购物车中。
• 5. 要查看新的 "Buy" 按钮，请刷新应用并单击商品名称以显示其详细信息。

---

》src/app/product-details/product-details.component.ts

---

import { Componet, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { products }  from '../products';
import { CartService } from '../cart.service';

export  class  ProductDetailsComponent  implements  OnInit  {
contructor (
private route: ActivatedRoute,
private cartService: CartService
) {}

addToCart(product) {
window.alert('Your product has been added to the cart!');
this.cartService.addToCart(product);
}
}

---

》 src/app/product-details/product-details.component.html

---

<h2>Product Details</h2>
 <div *ngIf="product">
  <h3>{{ product.name }}</h3> 
 <h4>{{ product.price | currency }}</h4> 
 <p>{{ product.description }}</p> 
 <button (click)="addToCart(product)">Buy</button>  </div>

2. 创建购物车页面

• 1. 生成购物车服务
     ng g component cart

  import  {  Component,  OnInit }  from  '@angular/core';
 @Component({
selector:  'app-cart',
templateUrl:  './cart.component.html',
 styleUrls:  ['./cart.component.css']
 })
  export  class  CartComponent  implements  OnInit {
  constructor()  {  }
 ngOnInit()  {
 }
 }

• 2. 为购物车组件添加路由

---

》 app.module.ts

---

@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{path: ' ', component: ProductListComponent},
{path: 'products/:productId', component: ProductDetailsComponent},
{ path: 'cart', component: CartComponent },
])
]
})

• 3. 创建 购物车链接
     点击top-bar 上面的“Checkout” button 链接到购物车页
     》top-bar.component.ts

<a [routerLink]="['/']">
  <h1>My Store</h1>
</a>

<a [routerLink]="['/cart']" class="button fancy-button"><i class="material-icons">shopping_cart</i>Checkout</a>

• 4. 显示购物车商品（items）
     a. 导入 CartService 服务 from cart.service.ts
     b. 注入CartService到构造函数来管理购物车信息
     c. 定义items 属性，存放在购物车中的商品
     d. 使用购物车服务CartService的 getItems() 设置items
     e. 更新cart模板，显示购物车中每个商品的名称和价格。

---

》src/app/cart/cart.component.ts

---

import  {  Component  }  from  '@angular/core';  
import  {  CartService  }  from  '../cart.service';
export class CartComponent {
items;
constructor (
private cartService: CartService
) {
this.items=this.cartService.getItems();
}
}

---

》src/app/cart/cart.component.html

---

<h3>Cart</h3>  
<div  class="cart-item" *ngFor="let item of items">  <span>{{ item.name }}</span>  
<span>{{ item.price | currency }}</span>  
</div>

3. 检索运费价格

• 1. 预定义商品运费价格
     预定义一个存放运费价格的json文件 src/assets/shipping.json

[
  {
    "type": "Overnight",
    "price": 25.99
  },
  {
    "type": "2-Day",
    "price": 9.99
  },
  {
    "type": "Postal",
    "price": 2.99
  }
]

• 2. 为应用启用HttpClient
     在使用Angular 的HTTP 客户端之前，你必须先设置你的应用来使用 HttpClientModule。
     Angular 的HttpClientModule 中 注册了在整个应用中使用 HttpClient 服务的单个实例所需的服务提供商。你可以在服务中注入HttpClient 服务来获取数据并于外部API 和资源进行交互。
     a. 导入HttpClientModule from @angular/common/http
     b. 增加HttpClientModule 到应用module(@NgModule)的imports 数组，注册全局的HttpClient 提供商。

---

》src/app/app.module.ts

---

import  {  NgModule}  from  '@angular/core'; 
import  {  BrowserModule}  from  '@angular/platform-browser';  
import  {  RouterModule }  from  '@angular/router';  import  {  HttpClientModule }  from  '@angular/common/http'; 
 import  {  ReactiveFormsModule }  from  '@angular/forms';  
import  {  AppComponent  }  from  './app.component';  import  {  TopBarComponent  }  from  './top-bar/top-bar.component'; 
import  {  ProductListComponent  }  from  './product-list/product-list.component';  
import  {  ProductAlertsComponent  }  from  './product-alerts/product-alerts.component';  
import  {  ProductDetailsComponent  }  from  './product-details/product-details.component';  

@NgModule({
 imports:  [ 
 BrowserModule, 
HttpClientModule, 
ReactiveFormsModule,
RouterModule.forRoot([  
{ path:  '', component:  ProductListComponent  },  
{ path:  'products/:productId', component:  ProductDetailsComponent  }, 
 { path:  'cart', component:  CartComponent  }, 
 ])  
], 
declarations:  [  
AppComponent,  
TopBarComponent, 
 ProductListComponent, 
 ProductAlertsComponent, 
 ProductDetailsComponent, 
 CartComponent,  ],
 bootstrap:  [  AppComponent  ]
  })  
export  class  AppModule  {  }

• 3. 为cart service启动HttpClient
     a. cart.service.ts 导入HttpClient from @angular/common/http
     b. 将HttpClient 注入到CartService 组件的构造函数中
     c. 定义get() 方法，通过http获取运费数据

---

》src/app/cart.service.ts

---

import  {  Injectable}  from  '@angular/core';  
import  {  HttpClient  }  from  '@angular/common/http;
export  class  CartService  { 
items =  []; 
 constructor(  private  http:  HttpClient  ) 
 {}  
addToCart(product) {
    this.items.push(product);
  }

  getItems() {
    return this.items;
  }

  clearCart() {
    this.items = [];
    return this.items;
  }
getShippingPrices() {
return this.http.get('/assets/shipping.json')
}
}