Cómo pasar datos entre dos componentes en Angular 2

Esta es el arreglo más correcta que encomtrarás compartir, sin embargo estúdiala detenidamente y valora si es compatible a tu trabajo.

Solución:

Puede transferir datos utilizando el servicio.

Cree un servicio que contenga los datos mientras cambia los componentes. A continuación se muestra un ejemplo.

import  Injectable  from '@angular/core';

@Injectable()
export class TransfereService 

  constructor(
    private router:Router,
    private companyServiceService:CompanyServiceService
  )  

  private data;

  setData(data)
    this.data = data;
  

  getData()
    let temp = this.data;
    this.clearData();
    return temp;
  

  clearData()
    this.data = undefined;
  

Ahora considere 2 componentes emisor y receptor.

Código de remitentes: este código establece los datos en el servicio y navega hasta el receptor.

import  Router  from '@angular/router';
import  TransfereService  from './services/transfer.service';

export class SenderComponent implements OnInit          
  constructor(
    private transfereService:TransfereService,
    private router:Router) 

  somefunction(data)
   this.transfereService.setData(data);
   this.router.navigateByUrl('/reciever');//as per router
 

Código del receptor: este código obtiene los datos del servicio y también los borra.

import  Router  from '@angular/router';
import  TransfereService  from './services/transfer.service';

export class RecieverComponent implements OnInit   
 data = this.transfereService.getData();       
 constructor(
   private transfereService:TransfereService,
   private router:Router) 
      if(this.data)
        // do whatever needed
      
      else
        this.router.navigateByUrl('/sender');
      
   

Debería consultar Fireship Demo para obtener lo mismo. Es útil.

Puede usar Entradas angulares 2 para pasar datos a un componente. Por ejemplo, en su clase secundaria, cree una variable de entrada usando el decorador angular 2 @Input.

import Component, Input from 'angular2/core';

@Component(
  selector: 'child',
  styles: [`
  `],
  template: `
  `
)
export class ChildComponent 
  @Input() valueToPass = 0;

En su componente principal (es decir, en el que está llamando a su componente secundario), pase su parámetro de la siguiente manera:

Le recomiendo que lea este artículo sobre pasar y recibir argumentos entre componentes (https://toddmotto.com/passing-data-angular-2-components-input).

Pasar datos entre componentes es un proceso bidireccional. En tu caso, digamos home.ts contiene un objeto llamado como data.

1.En el home.component.html donde usaste reemplácelo con .

2.En el map.ts archivo, agregue las entradas como:

@Input() data: string;

3. Ahora puedes usarlo en tu código como

   data.title

¡Espero eso ayude!

Nos puedes sustentar nuestro cometido dejando un comentario y valorándolo te damos la bienvenida.

---

---

Utiliza Nuestro Buscador