how to send data from a component to a server in angula 6

Question

how to send data from a component to a server in angula 6

Navigation

#1 by (1 votes)

0

Hello friends, I have a doubt, it is possible to send data to service from one component and then from the service to send them to another component. in this code I have errors but in case what I would like is to pass the data array that is in the first component to the service and after the service sent it to component 2, and beforehand thanks for the help

component 1 <p>hola<p>

import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; import {DatoscompraService} from './../datoscompra.service' @Component({ selector: 'app-carteras', templateUrl: './carteras.component.html', styleUrls: ['./carteras.component.css'] }) export class CarterasComponent implements OnInit { datos:any = [ { producto:'Cartera 1', cantidad: 3, precio:200 }, { producto:'Cartera 2', cantidad: 1 , precio:500 }, ]; constructor(private servicio:DatoscompraService) { } ngOnInit() { } public enviar(){ return this.datos; } }

service

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DatoscompraService { datoss:any[] = []; constructor() { } public enviarPara(){ } }

component 2

import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; import {DatoscompraService} from './../datoscompra.service' @Component({ selector: 'app-cabecera', templateUrl: './cabecera.component.html', styleUrls: ['./cabecera.component.css'] }) export class CabeceraComponent implements OnInit { datos:any[] = []; constructor(private servicio:DatoscompraService){ this.datos = servicio.enviarPara(); } ngOnInit() { } }

angularjs angular

asked by jhon sanchez 22.10.2018 в 00:11

source

1 answer

Restarurar DataBase Data NOT Pre-Existing SQL Sending items to the database from an Array MultiChoice individually

score 1 · Accepted Answer

To do this you should simply move the array to the service, allowing the public object and inject it for the entire module.

Your code remains as follows: Component1:

import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery';
import { DatoscompraService } from './../datoscompra.service'
@Component({
  selector: 'app-carteras',
  templateUrl: './carteras.component.html',
  styleUrls: ['./carteras.component.css']
})
export class CarterasComponent implements OnInit {
  constructor(public servicio: DatoscompraService) { }
  ngOnInit() { }
  public enviar() {
    return this.servicio.datos;
  }
}

Component 2

import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; 
import { DatoscompraService } from './../datoscompra.service'
@Component({
  selector: 'app-cabecera',
  templateUrl: './cabecera.component.html',
  styleUrls: ['./cabecera.component.css']
})
export class CabeceraComponent implements OnInit {
  constructor(public servicio: DatoscompraService) { }
  ngOnInit() { }
}

Service

import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' }) export class DatoscompraService {
  datos: any[] = [];
  constructor() { }
  public enviarPara() {
  }
}

To access the data array from the template you will only have to indicate servicio.datos

If you inject this service in the main module the array will be shared by the whole app since angular follows the singleton pattern in the services maintaining a single instance of the service depending on where it was injected.