parametros - Cómo pasar datos entre dos componentes en Angular 2

pasar parametros entre componentes angular 4

Question

Estoy buscando una solución para pasar datos a otro componente y acceder de manera similar a métodos de otro componente en otro (ambos son componentes paralelos).

Por ejemplo, tengo dos componentes home.ts y map.ts Obtengo algunos datos en map.ts y necesito pasarlos en home.ts y viceversa.

Answer 1

Puede transferir datos utilizando el servicio.

Haga 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 Remitente y Receptor.

Código de remitentes : este código establece los datos para el servicio y navega hacia 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 recupera 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 lo mismo. Es útil.

Answer 2

En Angular 4, use @Input para compartir un objeto entre padre e hijo. Aquí, los cambios en megmor (en el padre) o radfal (en el niño) se reflejarán en el otro.

HTML principal:

<div>
<zoptil [radfal]="megmor"></zoptil>
{{megmor.pergal}}
</div>

Padres ts:

let megmor = new Kreven();
this.megmor.pergal = "warbar";

Html infantil:

<div>
<h2>{{radfal.pergal}}</h2>
<label>Peragl: </label>
<input [(ngModel)]="radfal.pergal" />
</div>

Niño ts:

@Input() radfal: Kreven;

Answer 3

En Angular2 puede comunicarse entre dos componentes pasando el objeto en html.

Ejemplo

home.html:

...
<map_selector [ObjectInMap]="ObjectInHome" ></map_selector>
...

Answer 4

Pasar datos entre componentes es un proceso bidireccional. En su caso, digamos que home.ts contiene un objeto denominado como data .

1.En home.component.html , donde usó <map-component></map-component> , reemplácelo con <map-component [data]="data"></map-component> .

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

@Input() data: string;

3. Ahora puede usarlo en su código como <p>{{data.title}}</p>

¡Espero eso ayude!

Answer 5

Puede usar las entradas angulares 2 para pasar datos a un componente. Por ejemplo, en su clase secundaria, haga 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:

<child [valueToPass] = "value"></child>

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

Answer 6

Use sessionStorage, en angular donde desea establecer datos, escríbalo como

sessionStorage.setItem("key","value");

si quieres almacenar tu objeto entonces escribe como

sessionStorage.setItem("key", JSON.stringify(obj));

entonces el componente donde desea obtener el valor correcto sessionStorage.getItem("key") o para todo el objeto JSON.parse(sessonStorage.getKey("key");

Answer 7

De padre a hijo: compartir datos a través de la entrada Este es probablemente el método más común y directo para compartir datos. Funciona usando el decorador @Input () para permitir que los datos pasen a través de la plantilla.

Hijo a padre: compartir datos a través de ViewChild ViewChild permite que un componente se inyecte en otro, dando acceso al padre a sus atributos y funciones. Sin embargo, una advertencia es que el niño no estará disponible hasta después de que se haya inicializado la vista. Esto significa que necesitamos implementar el enlace del ciclo de vida AfterViewInit para recibir los datos del niño.

Hijo a padre: compartir datos a través de Output () y EventEmitter Otra forma de compartir datos es emitir datos del hijo, que el padre puede enumerar. Este enfoque es ideal cuando desea compartir los cambios de datos que ocurren en cosas como clics de botones, entradas de formularios y otros eventos de usuarios.

En el padre, creamos una función para recibir el mensaje y establecerlo igual a la variable del mensaje.

En el elemento secundario, declaramos una variable messageEvent con el decorador de salida y la establecemos igual a un nuevo emisor de eventos. Luego creamos una función llamada sendMessage que las llamadas emiten en este evento con el mensaje que queremos enviar. Por último, creamos un botón para activar esta función.

El padre ahora puede suscribirse a este mensajeEvento generado por el componente hijo, y luego ejecutar la función de recibir mensaje cada vez que ocurre este evento.

Componentes no relacionados: compartir datos con un servicio Al pasar datos entre componentes que carecen de una conexión directa, como hermanos, nietos, etc., debe utilizar un servicio compartido. Cuando tiene datos que siempre deben estar sincronizados, encuentro que RxJS BehaviorSubject es muy útil en esta situación.

También puede usar un Asunto RxJS regular para compartir datos a través del servicio, pero he aquí por qué prefiero un BehaviorSubject.

Siempre devolverá el valor actual en la suscripción; no es necesario llamar al siguiente. Tiene una función getValue () para extraer el último valor como datos sin procesar. Asegura que el componente siempre reciba los datos más recientes. En el servicio, creamos un BehaviorSubject privado que contendrá el valor actual del mensaje. Definimos una variable currentMessage para manejar este flujo de datos como un observable que será utilizado por los componentes. Por último, creamos una función que llama a continuación en BehaviorSubject para cambiar su valor.

Los componentes padre, hijo y hermano reciben el mismo tratamiento. Inyectamos el DataService en el constructor, luego nos suscribimos al observable currentMessage y establecemos su valor igual a la variable del mensaje.

Ahora si creamos una función en cualquiera de estos componentes que cambia el valor del mensaje. Cuando esta función se ejecuta, los nuevos datos se transmiten automáticamente a todos los demás componentes.

Referencia: https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/