Como puedo crear Variables que se puedan leer en todos los componentes?

Hola que tal.

Necesito crear variables con los precios de varios productos.
Estos productos están en varios componentes.

Como puedo crear las variables en una sola parte y despues agregarlas en los componentes respectivos.

Me pueden ayudar por favor

Lo normal es que si está en varios componentes, estos componentes obtengan el dato desde el servicio oportuno, que hará la consulta a la base de datos o donde corresponda.

Si los componentes es para crear una sola visual, puedes pasar a los hijos el producto como Input.


<h3>{{product.name}}

<show-price [product]="product"> </show-price>
<star-rating [product]="product"></star-rating>

Por hacer un ejemplo.

Mírate como añadir a los hijos parámetros Input.

Ok, Muchas Gracias

No tengo los datos en una base de datos.
lo que tengo es, por ejemplo:
frutas.component.ts
verduras.component.ts

y quiero tener los precios en un solo componente
Durazno = ‘800’;
Manzana = ‘1.000’
Peras = ‘600’;
Lechuga = ‘500’;
Rúcula = ‘900’;
Cebolla = ‘150’;

ahora como agrego esos precios a
frutas.component.html
verduras.component.html

{{ Durazno }} así es como se ponen las variables, pero el asunto es que tengo que poner las variables en
verduras.component.ts

public Durazno: string;
public Manzana: string;
public Peras: string;

constructor() {
this.Durazno = ‘800’;
this.Manzana = ‘1.000’
this.Peras = ‘600’;
}

y verduras.component.js

public Lechuga: string;
public Rúcula: string;
public Cebolla: string;

constructor() {
this.Lechuga = ‘500’;
this.Rúcula = ‘900’;
this.Cebolla = ‘150’;

No se si me explico bien, la idea es tener en un solo lugar los precios, para que sea mas fácil cambiarlos y no tener que buscar en cada componente, que pueden ser varios y en algunas categorías pueden repetirse, ya que por ahora no están en una base de datos.

Los datos no deben ir los componentes. Los componentes deben solicitarlo a servicios.

Si no tienes base de datos (entiendo que es porque los datos son fijos), te creas igualmente un servicio y este proporciona los datos a partir de un array que él tenga.



class ProductosService {
static FRUTAS = [
  { name: 'Manzana', price: 1000 },
  { name: 'Pera', price: 600 }
];

static VERDURAS = [
  { name: 'Lechuga', price: 500 },
  { name: 'Rúcula', price: 900 }
]
   
   getFrutas() {
     return ProductosService.FRUTAS;
 }

  getVerduras() {
    return ProductosService.VERDURAS;
}
}

Y todos los componentes acceden tienen este servicio y así acceden a los valores.

Al guardar los datos como arrays, puedes programar para que, en caso de añadir nuevos productos en el servicio, los componentes automáticamente muestren los nuevos productos sin modificación

Este tema se cerró automáticamente 10 días después de la última publicación. No se permiten nuevas respuestas.