1

Buena tarde verán llevo muy poco desarrollando en angular y me a agradado mucho el framework sin embargo no se si lo que estoy haciendo es la forma correcta de comunicar mis componentes o estoy cometiendo un sacrilegio de las buenas practicas de angular.

Verán mi aplicación se basa en un punto de venta donde en mi apartado principal de carrito de compras tengo una estructura de la siguiente forma

introducir la descripción de la imagen aquí

Ahora el flujo de la aplicación puede variar completamente el componente venta.linea es padre de sidebar.component y del elemento.component

durante flujo tendré 1 o varios elementos.component distintos dependiendo de lugar por el que accedo a venta-linea.component pero el sidebar siempre sera el mismo durante todo el flujo y debera contener la data que se selecciono en todos los componentes.

cada elemento.component esta subscrita a un servicio que hace una peticion http distinta a un servidor, y este le responde con un objeto que de tipo ElementoVL varios componentes obtendran este tipo de elemento pero con distintos datos o puede que tambien obtenga otro tipo de objeto o una combinacion de ElementoVL+OtroObjeto

Tengo mi objeto servicio el cual hace una petición http y trae un objeto del tipo ElementoVL (ojo el elemento VL lo guardo en el propio servicio y no lo retorno ya que el objetivo es ir guardando los diversos ElementoVL que obtenga de distintas peticiones hasta finalizar el apartado de compras por lo que si lo retornara el Elemento se destruiria cuando cambie de elemento.component)

import { Injectable, DoCheck } from '@angular/core';
import { Http } from '@angular/http'
import 'rxjs/add/operator/map'
import {ElementoVL} from './ElementoVL'

@Injectable()
export class VentaLineaService implements DoCheck{
  elementoVL : ElementoVL [] = [];

  URL_INTERNET_20 : string = "http://localhost:8080/VL/internet";

  constructor( private http:Http) { }
  ngDoCheck(){
    for(var item  of this.elementoVL){
       console.log(item.nombreSiebel+"   "+item.selected)
     }
  }
  getInternet20 (){
    return this.http.get(this.URL_INTERNET_20)
            .map( res => {
                  this.elementoVL = res.json().servicios_internet;
                  console.log(this.elementoVL);
             })
  }

}

Mi componente elemento.component (no se llama así pero le pongo el nombre de elemento por que son varios algunos funcionan de manera similar otros no) si se dan cuenta este trabaja con el ElementoVL del servicio donde guarda los datos en algunas variables (estas variables solo se utilizan para presentarlo en el HTML) si embargo se modifica la variable selected del objeto ElementoVL del servicio.

import { Component, OnInit, DoCheck } from '@angular/core';
import { VentaLineaService } from '../../../services/venta-linea.service'
import {ElementoVL} from '../../../services/ElementoVL'

@Component({
  selector: 'app-internet20',
  templateUrl: './internet20.component.html',
  styleUrls: ['./internet20.component.css'],
})
export class Internet20Component implements OnInit,DoCheck {
  descripcion : String;
  precioSeleccionado : number = 0;
  element : ElementoVL;

  constructor(private ventaLineaService : VentaLineaService) {
  }

  ngOnInit() {
    this.ventaLineaService.getInternet20()
          .subscribe();

  }
  ngDoCheck(){
    if(this.descripcion === undefined){
    for(var item of this.ventaLineaService.elementoVL){
        if(item.selected)
        this.descripcion = item.descripcionExtendida;
      }
    }
  }

  cambiaInfo(item : ElementoVL){
      this.descripcion = item.descripcionExtendida;
      this.precioSeleccionado = item.precio;
      this.element = item;
        for(var itemAux of this.ventaLineaService.elementoVL){
          if(itemAux.id === item.id){
            itemAux.selected = true;
          }
          else{
            itemAux.selected = false;
         }
     }
   }
}

Ahora mi sidebar en donde no me estoy subscribiendo a la peticion que hace el elemento.component simplemente estoy obteniendo el ElementoVL del servicio

import { Component, DoCheck } from '@angular/core';
import {ElementoVL} from '../../../../services/ElementoVL'
import { VentaLineaService } from '../../../../services/venta-linea.service'

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css'],
})
export class SideBarComponent implements DoCheck {
  element : ElementoVL[];
  constructor(private ventaLineaService : VentaLineaService) { }

  ngDoCheck() {
   this.element =this.ventaLineaService.elementoVL
   for(let elem of this.element){
      console.log(elem.nombreSiebel +""+ elem.selected);
    }
  }
}

Hasta el momento la aplicación funciona obtengo los datos en el elemento.component y los presento el usuario puede seleccionar alguna de las opciones que presento dependiendo de los datos obtenidos y posteriormente cuando se selecciona el valor del campo selected del elementoVl cambia a true por lo que como el sidebar tiene dicho elemento detecta el cambio por el método DoCheck y puedo presentar los datos que el usuario selecciono.

Ahora mi duda es ¿esta es la manera correcta de pasar información?

Lo pregunto por que el flujo pasara por otro elemento.component conservara el sidebar.component pero el usuario podra seguir agregando objetos al sidebar ya que este los seguira agregado cuando cambien su estado selected a true y los quitara cuando pasen a false

1 respuesta 1

1

Eh respondido algo muy similar hace unas semanas, mira lo siguiente:

Comunicacion entre componentes padre-hijo


Si no hay una relacion entre los componentes puedes pasar parametros a traves de la url con el servicio router de angular

La forma seria

app.module.ts

import { RouterModule, Routes } from '@angular/router';

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  {
    path: 'componente2',
    component: Componente2Component
  }
];

export const routing = RouterModule.forRoot(appRoutes);

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    )
  ],
  exports: [
    RouterModule
  ],
})

export class AppRoutingModule { }

componente1.component.ts

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

@Component({
    selector: 'app-componente1',
    templateUrl: './componente1.component.html'
})

export class Componente1Component implements OnInit {

  nombre: string = "";
  objeto: any = {};

  constructor(private router: Router) { }

  ngOnInit() {}

  navegarModelo = function () {

    //
    let parametros: any[] = [];
    this.parametros.push(this.nombre);
    this.parametros.push(this.objeto);

    this.router.navigate(['/componente2'], { queryParams: { array: parametros } });
  }
}

Paso por url una colección de un string y un objeto

componente2.component.ts

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

@Component({
    selector: 'app-componente2',
    templateUrl: './componente2.component.html'
})

export class Componente2Component implements OnInit {

  //
  nombreRecibido: string = "";
  objetoRecibido: any = {};

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit() {
    this.route.queryParams.subscribe((params: any) => {
      //Esta siguiente validación es para saber si me llegan parametros o no
      let detalleAux = JSON.stringify(params);
      if (let detalleAux.length > 2 && params.array[0] === "true") {
        this.nombreRecibido = params.array[1];
        this.objetoRecibido = params.array[2];
      }
    });
  }

}
2
  • Si leí algo sobre el tema sin embargo creo que no me di a entender del todo bien, mi problema surge cuando la comunicación entre componentes se da entre elementos que nos son padre - hijo si observas las imagen que coloque elemento.component y sidebar.component no tienen relación parental (por así decirlo), ahora la solución parecería que seria pasar la data por medio de venta-linea.component, sin embargo creo que este no seria el camino del todo correcto por que a lo largo del flujo esta tendrá que pasar data de distintos elemento.component
    – Polo
    Commented el 10 nov. 2017 a las 16:38
  • e incluso puede regresar al elemento.component anterior, ahora ten en cuenta que varios elementos.component tendrán el mismo objeto ElementoVL sin embargo sera completamente diferente la data. por lo que al pasar la información de un elemento.component y otro elemento.component sin que esta se sobrescriba y teniendo en cuenta que el flujo sera dinámico dependiendo desde donde acceda al la ruta del componente venta-linea.component
    – Polo
    Commented el 10 nov. 2017 a las 16:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.