# 20230226: Compartir data entre componentes Angular

javascript angular patterns
  • Se puede usar un data service para compartir data entre componentes no relacionados.
  • En mi caso, deseo compartir el url base de un backend (backendBaseUrl) entre distintos componentes.
  • ng generate service data
  • Creo en el data service la variable que deseo compartir y su valor por default. Además un método que me permite modificar su valor.
// data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private backendBaseUrlSource = new BehaviorSubject('http://localhost:3000');
  backendBaseUrl = this.backendBaseUrlSource.asObservable();

  constructor() { }

  setBackendBaseUrl(url: string) {
    this.backendBaseUrlSource.next(url);
  }
}
  • En el componente que requiere la data compartida, indico que use el service.
<!-- backend-base-url.component.html -->
<p class="input-group">
  <input type="text" class="form-control" placeholder="Base URL del backend" [(ngModel)]="backendBaseUrl">
  <button class="btn btn-warning" (click)="setBackendBaseUrl()">Cambiar</button>
</p>
// backend-base-url.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { DataService } from "../data.service";
import { Subscription } from 'rxjs';
//...
export class BackendBaseUrlComponent implements OnInit, OnDestroy {
  backendBaseUrl: string = '';
  subscription: Subscription = new Subscription;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.subscription = this.data.backendBaseUrl.subscribe(url => this.backendBaseUrl = url);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  setBackendBaseUrl() {
    this.data.setBackendBaseUrl(this.backendBaseUrl);
  }
}
// holamundo.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataService } from "../data.service";
import { Subscription } from 'rxjs';
//...
export class HolamundoComponent implements OnInit, OnDestroy {
	backendBaseUrl: string = '';
	subscription: Subscription = new Subscription;
	//...
	constructor(private http: HttpClient, private data: DataService) { }
	ngOnInit() {
	    this.subscription = this.data.backendBaseUrl.subscribe(url => this.backendBaseUrl = url);
	}

	ngOnDestroy() {
	    this.subscription.unsubscribe();
	}
	//...
}
Última versión: 4/13/2024, 4:27:12 AM