Hola, estoy tratando de enviar un objeto de 1. Componente a 2. Componente en un evento de clic. Actualmente intento esto usando un servicio de datos que tiene una función de obtención y configuración:
Servicio
@Injectable({ providedIn: 'root' }) export class Service{ private subject = new Subject<any>(); setDataObject(obj) { this.subject.next(obj) } getDataObject(obj): Observable <any> { return this.subject; } }En el 1. Componente, activo setDataObject(obj) en un evento de clic.
HTML del componente principal
<tbody> <tr *ngFor="let item of tableElements;" (click)="onSelect(item)"> ...1. Componente
export class ParentComponent { constructor(private service: Service) { } onClick(obj: object) { this.service.setDataObject(obj); } }En el componente 2, ahora no estoy seguro de cómo suscribirme correctamente al Observable y podría guardar el objeto del componente 1 en otra variable. Pero he leído que no deberías usar el observable de esa manera.
2. Componente
export class ChildComponent { displayObservable$: Observable<any>; constructor(private service: Service) { this.displayObservable$ = service.getDataObject().pipe( map((res) => { console.log('value from service' + res); return res; }) ); } }Entonces, ¿cómo puedo mostrar el objeto y sus propiedades en mi plantilla HTML? Ya probé:
Componente secundario HTML
<div>Value from Service = {{ displayObservable$ | async }}</div>"
pero mientras mi console.log muestra el obj, no se muestra en la plantilla.
Este es un ejemplo simple de cómo puede configurar el observable dentro de un servicio básico y luego suscribirse a él desde otro componente.
Después de recibir el valor del observable, puede mostrarlo dentro de la plantilla HTML del componente de llamada mediante un observable de canalización asíncrona.
Service
TS
@Injectable() export class Service { subject: Subject<number> = new Subject(); setDataObject(obj) { this.subject.next(obj); } getDataObject(): Observable<any> { return this.subject; } } Client Component
TS
El siguiente código inicializamos el observable asincrónico sin suscribirnos a él y proporcionamos un método para establecer el valor del observable dentro del servicio con un número aleatorio.
export class AppComponent { displayObservable$: Observable<number>; constructor(private api: Service) { this.displayObservable$ = api.getDataObject().pipe( map((res) => { console.log('value from service = ' + res); return res; }) ); } sendValue(val: any) { let num: number = Math.floor(Math.random() * 100); console.log('value sent to service = ' + num); this.api.setDataObject(num); } } HTML
El siguiente HTML consta de un botón para enviar un valor al servicio y un observable async para mostrar la respuesta:
<div>Value from service = {{ displayObservable$ | async }}</div> <p> <button type="button" class="btn btn-primary" id="btnSendValue" (click)="sendValue($event)"> Send a value to service </button> </p>