-2

En angularJS podía hacer uso de una variable rootscope compartida entre todos los controladores y vistas, necesito compartir una variable entre dos controladores en un proyecto de ionic con angular 2, y hasta ahora no he encontrado nada sobre como hacerlo.

¿Alguien puede ayudarme?

1
  • se pasan a traves de service o factory , las buenas practicas recomiendan services Commented el 13 jun. 2017 a las 16:54

2 respuestas 2

2

Si bien el uso de un servicio como singleton es una opción, la manera correcta es utilizar los decoradores @Input() @Output() para compartir parámetros entre objetos.

Te dejo un ejemplo sencillo y fácil de entender:

app.component.ts

import { Persona } from './persona';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  cliente: any = { nombre: 'Joaquín' };
  cambioPersona(persona: Persona) {
    this.cliente = persona;
  }
}

app.component.html

<div style="text-align:center">
  <h1>
    {{cliente | json}}!
  </h1>
  <app-hijo [clienteEnHijo]="cliente" (onClienteChange)="cambioPersona($event)"></app-hijo>
</div>

El selector 'app-hijo' pasa como parametro la variable "cliente" como un @Input y el evento "cambioPersona" como @Output

hijo.component.ts

import { Persona } from './../persona';
import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core';

@Component({
  selector: 'app-hijo',
  templateUrl: './hijo.component.html',
})
export class HijoComponent implements OnInit {

  @Input() clienteEnHijo:Persona;
  @Output() onClienteChange = new EventEmitter<Persona>();

  constructor() { }
  ngOnInit() { }

  cambiarCliente(){
    this.clienteEnHijo = {nombre:'Benito'};
    this.onClienteChange.emit(this.clienteEnHijo)
  }
}

hijo.component.html

<p>
  hijo works!{{clienteEnHijo|json}} 
</p>
<button (click)="cambiarCliente()">Cambiar cliente</button>

persona.ts

// Interfaz
export interface Persona {
    nombre: string,
}
-1

Como bien te comentan, se utiliza un servicio, en angular 2 yo lo hago de esta manera ya que me permite manejar los mensajes de una forma prolija y eficiente.

Utilizo un servicio como este que se comunica con todos los componentes que necesito:

@Injectable()
export class Servicio{
  getValue: BehaviorSubject<any> = new BehaviorSubject({});

  setValue(value){
    return this.getValue.next({valor: value});
  }

}

Para que se pueda entender mejor, te dejo un ejemplo en plnkr: http://plnkr.co/edit/Wl9Lda9hULSxMy2kJjvM?p=preview

Espero que sea lo que necesitas, en caso contrario, no dudes en volver a preguntar.

2
  • Justo lo que necesitaba!! Funciona perfecto. Commented el 15 jun. 2017 a las 12:21
  • Excelente, saludos
    – KN_
    Commented el 15 jun. 2017 a las 12:27

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.