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,
}