▷Gestión de datos angular ✔️ Foro Ayuda 【 2024 】

Esta guía se basa en el segundo paso de la Comenzando con una aplicación angular básica tutorial, Agregar navegación. En esta etapa de desarrollo, la aplicación de la tienda tiene un catálogo de productos con dos vistas: una lista de productos y detalles del producto. Los usuarios pueden hacer clic en el nombre de un producto de la lista para ver los detalles en una nueva vista, con una URL o ruta distinta.

Este paso del tutorial lo guía a través de la creación de un carrito de compras en las siguientes fases:

Actualice la vista de detalles del producto para incluir un Comprar , que agrega el producto actual a una lista de productos que administra un servicio de carrito.
Agregue un componente de carrito, que muestra los artículos en el carrito.
Agregue un componente de envío, que recupera los precios de envío de los artículos en el carrito usando Angular’s HttpClient para recuperar datos de envío de un .json expediente.

Crear el servicio de carrito de compras

En Angular, un servicio es una instancia de una clase que puede poner a disposición de cualquier parte de su aplicación utilizando el sistema de inyección de dependencias de Angular.

Actualmente, los usuarios pueden ver la información del producto y la aplicación puede simular el intercambio y las notificaciones sobre los cambios del producto.

El siguiente paso es crear una forma para que los usuarios agreguen productos a un carrito. Esta sección le guía para agregar un Comprar y configurar un servicio de carrito para almacenar información sobre los productos en el carrito.

Definir un servicio de carrito

Para generar un servicio de carrito, haga clic derecho en el app carpeta, elija Generador angular, y elige Servicio. Nombra el nuevo servicio cart.
```
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CartService {

  constructor() {}

}
```
En el CartService clase, define una items propiedad para almacenar la matriz de los productos actuales en el carrito.
```
export class CartService {
  items = [];
}
```
Defina métodos para agregar artículos al carrito, devolver artículos del carrito y borrar los artículos del carrito.
```
export class CartService {
  items = [];

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

  getItems() {
    return this.items;
  }

  clearCart() {
    this.items = [];
    return this.items;
  }
}
```
- los addToCart() método agrega un producto a una matriz de items.
- los getItems() El método recopila los artículos que los usuarios agregan al carrito y devuelve cada artículo con su cantidad asociada.
- los clearCart() El método devuelve una matriz vacía de elementos, que vacía el carrito.

Utilice el servicio de carrito

Esta sección le guía a través del uso de CartService para agregar un producto al carrito.

En product-details.component.ts, importe el servicio de carrito.

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

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

Inyecte el servicio de carrito agregándolo al constructor().

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

Definir el addToCart() método, que agrega el producto actual al carrito.
```
export class ProductDetailsComponent implements OnInit {
  addToCart(product) {
    this.cartService.addToCart(product);
    window.alert('Your product has been added to the cart!');
  }
}
```
los addToCart() método hace lo siguiente:
- Toma la corriente product como argumento.
- Usa el CartService addToCart() método para agregar el producto al carrito.
- Muestra un mensaje de que ha agregado un producto al carrito.
En product-details.component.html, agregue un botón con la etiqueta Comprary unir el click() evento al addToCart() método. Este código actualiza la plantilla de detalles del producto con un Comprar botón que agrega el producto actual al carrito.
```
<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>
```
Verifique que el nuevo Comprar El botón aparece como se esperaba al actualizar la aplicación y hacer clic en el nombre de un producto para mostrar sus detalles.
Haga clic en el Comprar para agregar el producto a la lista almacenada de artículos en el carrito y mostrar un mensaje de confirmación.

Crear la vista del carrito

Para que los clientes vean su carrito, puede crear la vista del carrito en dos pasos:

Cree un componente de carro y configure el enrutamiento al nuevo componente.
Muestre los artículos del carrito.

Configurar el componente del carrito

Para crear la vista del carrito, siga los mismos pasos que hizo para crear el ProductDetailsComponent y configurar el enrutamiento para el nuevo componente.

Genere un componente de carrito llamado cart haciendo clic derecho en el app carpeta, eligiendo Generador angular, y Componente.
```
import { Component } from '@angular/core';

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

  constructor() { }

}
```
StackBlitz también genera un ngOnInit() por defecto en componentes. Puedes ignorar el CartComponent ngOnInit() para este tutorial.

Abierto app.module.ts y agregue una ruta para el componente CartComponent, con un path de cart.

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

Actualizar el Verificar botón para que se dirija al /cart URL. En top-bar.component.html, Agrega un routerLink directiva apuntando a /cart.
```
<a routerLink="/cart">
  <i>shopping_cart</i>Checkout
</a>
```
Verificar el nuevo CartComponent funciona como se esperaba haciendo clic en el Verificar botón. ¡Puedes ver el “carrito funciona!” texto predeterminado y la URL tiene el patrón https://getting-started.stackblitz.io/cart, dónde getting-started.stackblitz.io puede ser diferente para su proyecto StackBlitz.

Mostrar los artículos del carrito

Esta sección le muestra cómo utilizar el servicio de carrito para mostrar los productos en el carrito.

En cart.component.ts, importar el CartService desde el cart.service.ts expediente.

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

Inyectar el CartService de manera que la CartComponent puede usarlo agregándolo a la constructor().
```
export class CartComponent {

  constructor(
    private cartService: CartService
  ) { }
}
```
Definir el items propiedad para almacenar los productos en el carrito.
```
export class CartComponent {
  items = this.cartService.getItems();

  constructor(
    private cartService: CartService
  ) { }
}
```
Este código establece los elementos utilizando el CartService getItems() método. Tu definiste este método cuando creaste cart.service.ts.
Actualice la plantilla del carrito con un encabezado y use un <div> con un *ngFor para mostrar cada uno de los artículos del carrito con su nombre y precio. La resultante CartComponent La plantilla es la siguiente.
```
<h3>Cart</h3>

<div *ngFor="let item of items">
  <span>{{ item.name }}</span>
  <span>{{ item.price | currency }}</span>
</div>
```
Verifique que su carrito funcione como se esperaba:
- Hacer clic Mi tienda
- Haga clic en el nombre de un producto para mostrar sus detalles.
- Hacer clic Comprar para agregar el producto al carrito.
- Hacer clic Verificar para ver el carro.

Para obtener más información sobre los servicios, consulte Introducción a los servicios y la inyección de dependencia.

Recuperar precios de envío

Los servidores a menudo devuelven datos en forma de flujo. Las transmisiones son útiles porque facilitan la transformación de los datos devueltos y la modificación de la forma en que solicita esos datos. Angular HttpClient es una forma integrada de obtener datos de API externas y proporcionarlos a su aplicación como un flujo.

Esta sección le muestra cómo usar HttpClient para recuperar los precios de envío de un archivo externo.

La aplicación que StackBlitz genera para esta guía viene con datos de envío predefinidos en assets/shipping.json. Utilice estos datos para agregar los precios de envío de los artículos en el carrito.

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

Configurar `AppModule` usar `HttpClient`

Para usar Angular’s HttpClient, debe configurar su aplicación para usar HttpClientModule.

Angular HttpClientModule registra los proveedores que su aplicación necesita para utilizar el HttpClient servicio a lo largo de su aplicación.

En app.module.ts, importar HttpClientModule desde el @angular/common/http paquete en la parte superior del archivo con las otras importaciones. Como hay varias otras importaciones, este fragmento de código las omite por brevedad. Asegúrese de dejar las importaciones existentes en su lugar.
```
import { HttpClientModule } from '@angular/common/http';
```

Para registrar Angular’s HttpClient proveedores a nivel mundial, agregue HttpClientModule al AppModule @NgModule() imports formación.

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

Configurar `CartService` usar `HttpClient`

El siguiente paso es inyectar el HttpClient service en su servicio para que su aplicación pueda obtener datos e interactuar con API y recursos externos.

En cart.service.ts, importar HttpClient desde el @angular/common/http paquete.

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

Inyectar HttpClient en el CartService constructor().

export class CartService {
  items = [];

  constructor(
    private http: HttpClient
  ) {}
}

Configurar `CartService` para obtener precios de envío

Para obtener datos de envío, desde shipping.json, Puede utilizar el HttpClient get() método.

En cart.service.ts, bajo el clearCart() método, defina un nuevo getShippingPrices() método que utiliza el HttpClient get() método.

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

Para obtener más información sobre Angular’s HttpClient, consulte la guía Interacción cliente-servidor.

Crea un componente de envío

Ahora que ha configurado su aplicación para recuperar datos de envío, puede crear un lugar para representar esos datos.

Genere un nuevo componente llamado shipping haciendo clic derecho en el app carpeta, eligiendo Generador angulary seleccionando Componente.

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

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

  constructor() { }

}

En app.module.ts, agregue una ruta para el envío. Especifique un path de shipping y un componente de 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 { }

Todavía no hay un enlace al nuevo componente de envío, pero puede ver su plantilla en el panel de vista previa ingresando la URL que especifica su ruta. La URL tiene el patrón: https://getting-started.stackblitz.io/shipping donde el getting-started.stackblitz.io parte puede ser diferente para su proyecto StackBlitz.

Configurando el `ShippingComponent` usar `CartService`

Esta sección le guía a través de la modificación del ShippingComponent para recuperar datos de envío a través de HTTP desde el shipping.json expediente.

En shipping.component.ts, importar CartService.

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

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

Inyecte el servicio de carrito en el ShippingComponent constructor().
```
constructor(private cartService: CartService) {
}
```
Definir un shippingCosts propiedad que establece el shippingCosts propiedad usando el getShippingPrices() método del CartService.
```
export class ShippingComponent {
  shippingCosts = this.cartService.getShippingPrices();
}
```
Actualizar el ShippingComponent plantilla para mostrar los tipos de envío y precios utilizando la async tubo.
```
<h3>Shipping Prices</h3>

<div *ngFor="let shipping of shippingCosts | async">
  <span>{{ shipping.type }}</span>
  <span>{{ shipping.price | currency }}</span>
</div>
```
los async pipe devuelve el último valor de un flujo de datos y continúa haciéndolo durante la vida útil de un componente determinado. Cuando Angular destruye ese componente, el async la tubería se detiene automáticamente. Para obtener información detallada sobre el async pipe, consulte la documentación de la API de AsyncPipe.

Agregue un enlace desde el CartComponent ver a la ShippingComponent vista.

<h3>Cart</h3>

<p>
  <a routerLink="/shipping">Shipping Prices</a>
</p>

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

Haga clic en el Verificar para ver el carrito actualizado. Recuerde que cambiar la aplicación hace que se actualice la vista previa, lo que vacía el carrito.

Haga clic en el enlace para navegar a los precios de envío.

Que sigue

Ahora tiene una aplicación de tienda con un catálogo de productos, un carrito de compras y puede buscar precios de envío.

Para continuar explorando Angular:

Continuar a Formularios para la entrada del usuario para finalizar la aplicación agregando la vista del carrito de compras y un formulario de pago.
Saltar a Despliegue para pasar al desarrollo local o implementar su aplicación en Firebase o en su propio servidor.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Tags : Angular Miscellaneous /

Gestión de datos angular

Crear el servicio de carrito de compras

Definir un servicio de carrito

Utilice el servicio de carrito

Crear la vista del carrito

Configurar el componente del carrito

Mostrar los artículos del carrito

Recuperar precios de envío

Configurar `AppModule` usar `HttpClient`

Configurar `CartService` usar `HttpClient`

Configurar `CartService` para obtener precios de envío

Crea un componente de envío

Configurando el `ShippingComponent` usar `CartService`

Que sigue

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Crear el servicio de carrito de compras

Definir un servicio de carrito

Utilice el servicio de carrito

Crear la vista del carrito

Configurar el componente del carrito

Mostrar los artículos del carrito

Recuperar precios de envío

Configurar AppModule usar HttpClient

Configurar CartService usar HttpClient

Configurar CartService para obtener precios de envío

Crea un componente de envío

Configurando el ShippingComponent usar CartService

Que sigue

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Configurar `AppModule` usar `HttpClient`

Configurar `CartService` usar `HttpClient`

Configurar `CartService` para obtener precios de envío

Configurando el `ShippingComponent` usar `CartService`