亚洲一级片毛片女人,欧美日倝在线视频一

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)Angular教程：Angular管理數(shù)據(jù)

管理數(shù)據(jù)

本章基于以一個(gè)基本 Angular 應(yīng)用快速上手的第二步 —— 添加導(dǎo)航。在此開發(fā)階段，本商店應(yīng)用具有一個(gè)包含兩個(gè)視圖的商品名錄：商品列表和商品詳情。用戶點(diǎn)擊清單中的某個(gè)商品名稱，就會(huì)在新視圖中看到具有專門的 URL 或路由的詳情頁。

創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、小程序制作、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10多年以來，已經(jīng)為超過千家成都服務(wù)器托管各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的超過千家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

本頁將指導(dǎo)你分三個(gè)步驟創(chuàng)建購物車：

修改商品詳情視圖，讓它包含一個(gè) “Buy” 按鈕，它會(huì)把當(dāng)前商品添加到由 "購物車服務(wù)" 管理的商品列表中。
添加一個(gè)購物車組件，它會(huì)顯示購物車中的商品。
添加一個(gè)配送組件，它會(huì)使用 Angular 的 ?HttpClient ?從 ?.json? 文件中檢索配送數(shù)據(jù)來取得購物車中這些商品的運(yùn)費(fèi)。

創(chuàng)建購物車服務(wù)

在 Angular 中, 服務(wù)是類的一個(gè)實(shí)例, 借助 Angular 的依賴注入體系，你可以在應(yīng)用中的任意部分使用它。

現(xiàn)在, 用戶可以瀏覽產(chǎn)品信息，而應(yīng)用可以模擬分享產(chǎn)品，以及發(fā)出產(chǎn)品變更通知。

下一步是為用戶提供一種把產(chǎn)品添加到購物車中的方法。本章節(jié)將帶領(lǐng)你添加一個(gè) Buy 按鈕并且建立一個(gè)購物車服務(wù)以保存購物車中的產(chǎn)品信息。

定義購物車服務(wù)

本節(jié)將引導(dǎo)你創(chuàng)建用于跟蹤添加到購物車的產(chǎn)品的 ?CartService ?。

在終端中通過運(yùn)行以下命令生成一個(gè)新的 ?cart ?服務(wù)：

ng generate service cart

將 ?Product ?接口從 ?./products.ts? 導(dǎo)入到 ?cart.service.ts? 文件中，在 ?CartService ?類中，定義一個(gè) ?items ?屬性來存儲(chǔ)購物車中當(dāng)前產(chǎn)品的數(shù)組。

import { Product } from './products';
/* . . . */
export class CartService {
  items: Product[] = [];
/* . . . */
}

定義把商品添加到購物車、返回購物車商品以及清除購物車商品的方法：

export class CartService {
  items: Product[] = [];
/* . . . */

  addToCart(product: Product) {
    this.items.push(product);
  }

  getItems() {
    return this.items;
  }

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

?addToCart()? 方法會(huì)將產(chǎn)品附加到 ?items ?數(shù)組中。

?getItems()? 方法會(huì)收集用戶加到購物車中的商品，并返回每個(gè)商品及其數(shù)量。
?clearCart()? 方法返回一個(gè)空數(shù)組。

使用購物車服務(wù)

本節(jié)會(huì)教你使用 ?CartService ?來把一個(gè)商品添加到購物車中。

在 ?product-details.component.ts? 中導(dǎo)入購物車服務(wù)。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Product, products } from '../products';
import { CartService } from '../cart.service';

通過把購物車服務(wù)注入到這里的 ?constructor()? 中來注入它。

export class ProductDetailsComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private cartService: CartService
  ) { }
}

定義 ?addToCart()? 方法，該方法會(huì)當(dāng)前商品添加到購物車中。

export class ProductDetailsComponent implements OnInit {

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

?addToCart()? 方法做了如下事情:

以當(dāng)前'product'作為參數(shù)。
使用 ?CartService ??addToCart()? 方法去添加產(chǎn)品到購物車中。
顯示一條你已經(jīng)添加了一個(gè)產(chǎn)品到購物車到消息。

在 ?product-details.component.html? 中，添加一個(gè)帶有 Buy 標(biāo)簽的按鈕，并且把其 ?click()? 事件綁定到 ?addToCart()? 方法上。這段代碼會(huì)為產(chǎn)品詳情模板添加一個(gè) Buy 按鈕，并把當(dāng)前產(chǎn)品添加到購物車中。

Product Details


  {{ product.name }}
  {{ product.price | currency }}
  {{ product.description }}

刷新應(yīng)用，以驗(yàn)證新的 ?Buy ?按鈕如預(yù)期般出現(xiàn)了，并且單擊某個(gè)產(chǎn)品的名稱，以展示其詳情。
點(diǎn)擊“Buy”按鈕來把該商品添加到購物車中存儲(chǔ)的商品列表中，并顯示一條確認(rèn)消息。

創(chuàng)建購物車視圖

為了讓顧客看到他們的購物車，你可以用兩步創(chuàng)建購物車視圖：

創(chuàng)建一個(gè)購物車組件并配置指向這個(gè)新組件的路由。
顯示購物車商品

設(shè)置該組件

要?jiǎng)?chuàng)建購物車視圖，可遵循與創(chuàng)建 ?ProductDetailsComponent ?相同的步驟，并且為這個(gè)新組件配置路由。

通過運(yùn)行以下命令在終端中生成一個(gè)名為 ?cart ?的新組件：

ng generate component cart

此命令將生成 ?cart.component.ts? 文件及其關(guān)聯(lián)的模板和樣式文件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent {

  constructor() { }

}

StackBlitz 還在組件中默認(rèn)生成一個(gè) ?ngOnInit()? 。對(duì)于本教程，你可以忽略 ?CartComponent ?的 ?ngOnInit()? 。

請(qǐng)注意，新創(chuàng)建的 ?CartComponent? 已添加到 ?app.module.ts? 中模塊的 ?declarations ?中。

import { CartComponent } from './cart/cart.component';

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent,
    CartComponent,
  ],

打開 ?app.module.ts?，為組件 ?CartComponent ?添加一個(gè)路由，其路由為 ?cart ?：

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

修改 "Checkout" 按鈕，以便讓它路由到 ?/cart?。在 ?top-bar.component.html? 中添加一個(gè)指向 ?/cart? 的 ?routerLink ?指令。


  shopping_cartCheckout

要查看新的購物車組件，請(qǐng)點(diǎn)擊“Checkout”按鈕。你會(huì)看到默認(rèn)文本“cart works!”，該 URL 的格式為 ?https://getting-started.stackblitz.io/cart?，其中的 getting-started.stackblitz.io 部分可能與你的 StackBlitz 項(xiàng)目不同。

顯示購物車商品

本節(jié)將告訴你如何修改購物車組件以使用購物車服務(wù)來顯示購物車中的商品。

在 ?cart.component.ts? 中，從 ?cart.service.ts? 文件中導(dǎo)入 ?CartService?。

import { Component } from '@angular/core';
import { CartService } from '../cart.service';

注入 ?CartService?，以便購物車組件可以使用它。

export class CartComponent {


  constructor(
    private cartService: CartService
  ) { }
}

定義 ?items ?屬性，以便把商品存放在購物車中。

export class CartComponent {

  items = this.cartService.getItems();

  constructor(
    private cartService: CartService
  ) { }
}

這段代碼使用 ?CartService ?的 ?getItems()? 方法來設(shè)置條目。

修改模板，加上標(biāo)題，用帶有 ?*ngFor? 的 ?
? 來顯示每個(gè)購物車商品的名字和價(jià)格。

生成的 ?CartComponent ?模板如下：

Cart


  {{ item.name }}
  {{ item.price | currency }}

驗(yàn)證你的購物車如預(yù)期般工作：

點(diǎn)擊 My Store
單擊商品名稱以顯示其詳細(xì)信息。
點(diǎn)擊Buy 將商品添加到購物車。
點(diǎn)擊Checkout查看購物車。

檢索運(yùn)費(fèi)價(jià)格

服務(wù)器通常采用流的形式返回?cái)?shù)據(jù)。流是很有用的，因?yàn)樗鼈兛梢院苋菀椎剞D(zhuǎn)換返回的數(shù)據(jù)，也可以修改你請(qǐng)求數(shù)據(jù)的方式。 Angular 的 HTTP 客戶端（ ?HttpClient ?）是一種內(nèi)置的方式，可以從外部 API 中獲取數(shù)據(jù)，并以流的形式提供給你的應(yīng)用。

本節(jié)會(huì)為你展示如何使用 ?HttpClient ?從外部文件中檢索運(yùn)費(fèi)。

在本指南的 StackBlitz 應(yīng)用中，通過 ?assets/shipping.json? 文件提供了一些預(yù)定義的配送數(shù)據(jù)。你可以利用這些數(shù)據(jù)為購物車中的商品添加運(yùn)費(fèi)。

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

配置 AppModule 以使用 HttpClient

要使用 Angular 的 HTTP 客戶端之前，你必須先配置你的應(yīng)用來使用 ?HttpClientModule?。

Angular 的 ?HttpClientModule ?中注冊(cè)了在整個(gè)應(yīng)用中使用 ?HttpClient ?服務(wù)的單個(gè)實(shí)例所需的服務(wù)提供者。

在 ?app.module.ts? 的頂部從 ?@angular/common/http? 包中導(dǎo)入 ?HttpClientModule ?以及其它導(dǎo)入項(xiàng)。由于有很多其它導(dǎo)入項(xiàng)，因此這里的代碼片段省略它們，以保持簡潔。請(qǐng)確?，F(xiàn)有的導(dǎo)入都還在原地。

import { HttpClientModule } from '@angular/common/http';

把 ?HttpClientModule ?添加到 ?AppModule ??@NgModule()? 的 ?imports ?數(shù)組中，以便全局注冊(cè) Angular 的 ?HttpClient?。

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

配置 CartService 以使用 HttpClient

下一步是注入 ?HttpClient ?服務(wù)到你的服務(wù)中, 這樣你的應(yīng)用可以獲取數(shù)據(jù)并且與外部API和資源互動(dòng)。

從 ?@angular/common/http? 包中導(dǎo)入 ?HttpClient?。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Product } from './products';

把 ?HttpClient ?注入到 ?CartService ?的構(gòu)造函數(shù)中：

export class CartService {
  items: Product[] = [];

  constructor(
    private http: HttpClient
  ) {}
/* . . . */
}

配置 CartService 以得到商品價(jià)格

要從 ?shapping.json? 中得到商品數(shù)據(jù), 你可以使用 ?HttpClient ??get()? 方法。

在 ?cart.service.ts? 中 ?clearCart()? 方法下面，定義一個(gè)新的 ?getShippingPrices()? 方法，該方法會(huì)調(diào)用 ?HttpClient#get() ?方法。

export class CartService {
/* . . . */
  getShippingPrices() {
    return this.http.get<{type: string, price: number}[]>('/assets/shipping.json');
  }
}

創(chuàng)建配送組件

現(xiàn)在你的應(yīng)用已經(jīng)可以檢索配送數(shù)據(jù)了，你還要?jiǎng)?chuàng)建一個(gè)配送組件和相關(guān)的模板。

在終端窗口中運(yùn)行如下命令，以生成名為 ?shipping ?的組件：

ng generate component shipping

右鍵單擊 ?app ?文件夾，選擇 Angular Generator 和 Component 來生成一個(gè)名為 ?shipping ?的新組件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-shipping',
  templateUrl: './shipping.component.html',
  styleUrls: ['./shipping.component.css']
})
export class ShippingComponent {

  constructor() { }

}

在 ?app.module.ts? 中，添加一個(gè)配送路由。其 ?path ?為 ?shipping?，其 component 為 ?ShippingComponent?。

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

新的配送組件尚未鏈接到任何其它組件，但你可以通過輸入其路由指定的 URL 在預(yù)覽窗格中看到它的模板。該 URL 具有以下模式：?https://angular-ynqttp--4200.local.webcontainer.io/shipping? ，其中的 gets-started.stackblitz.io 部分可能與你的 StackBlitz 項(xiàng)目不同。

配置 ShippingComponent 以使用 CartService

這個(gè)章節(jié)將指導(dǎo)你修改 ?ShappingComponent ?以通過HTTP從 ?shipping.json? 文件中提取商品數(shù)據(jù)。

在 ?shipping.component.ts? 中導(dǎo)入 ?CartService?。

import { Component } from '@angular/core';

import { CartService } from '../cart.service';

把購物車服務(wù)注入到 ?ShippingComponent ?的 ?constructor()? 構(gòu)造函數(shù)中：

constructor(private cartService: CartService) { }

定義一個(gè) ?shippingCosts ?屬性，并從 ?CartService ?中利用購物車服務(wù)的 ?getShippingPrices()? 方法設(shè)置它。

export class ShippingComponent {

  shippingCosts = this.cartService.getShippingPrices();
}

利用 ?async ?管道修改配送組件的模板，以顯示配送類型和價(jià)格：

Shipping Prices


  {{ shipping.type }}
  {{ shipping.price | currency }}

?async ?管道從數(shù)據(jù)流中返回最新值，并在所屬組件的生命期內(nèi)持續(xù)返回。當(dāng) Angular 銷毀該組件時(shí)，?async ?管道會(huì)自動(dòng)停止。

在購物車視圖中添加一個(gè)到配送視圖的鏈接：

Cart


  Shipping Prices



  {{ item.name }}
  {{ item.price | currency }}

點(diǎn)擊 Checkout 按鈕，查看更新后的購物車。注意，修改本應(yīng)用會(huì)導(dǎo)致預(yù)覽窗格刷新，這會(huì)清空購物車。

點(diǎn)擊此鏈接可以導(dǎo)航到運(yùn)費(fèi)頁。

文章題目：創(chuàng)新互聯(lián)Angular教程：Angular管理數(shù)據(jù)
URL鏈接：http://m.5511xx.com/article/cdgiddh.html

日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区