Angular 10: compartir datos entre componentes hermanos

Question

Quiero compartir datos entre 2 componentes hermanos.

• Componente 1: Mi componente 1 es mi barra de navegación y tiene una opción para cambiar el idioma de la aplicación (usando ngx-translate), esta opción es una selección con diferentes opciones.
• Componente 2: Mi componente 2 es un blog con diferentes publicaciones, estas publicaciones se guardan en una base de datos MySQL, hay 2 idiomas posibles, las publicaciones se guardan en diferentes tablas de la base de datos dependiendo del idioma que se escriban.

Entonces, lo que estamos tratando de hacer es, dependiendo del idioma seleccionado en el componente 1, hacer una solicitud http al backend pasando el idioma real seleccionado para obtener las publicaciones de la tabla correspondiente.

¿Alguna idea de cómo hacer que se seleccione el idioma en mi componente 2 cuando la opción de selección cambia en mi componente 1?

Answer 1

Ya que está utilizando ngx-translate, puede utilizar su servicio para saber qué idioma está seleccionado en lugar de depender de su componente.

@Component({ ... })
export class Component2 implements OnInit {
    constructor(private translate: TranslateService) { }

    ngOnInit() {
        this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
            // run your code
        });
    }
}

Consulte la documentación de la ngx-translatebiblioteca para obtener una lista de todos los eventos y propiedades.

Answer 2

Aquí puede utilizar RxJS. Para que pueda hacer un servicio que tenga BehaviourSubject. Y luego, cuando cambie el valor en el componente 1 , actualizará este valor de BehaviourSubject. Entonces, en 2 componentes , puede escuchar los cambios de valor del tema y el servicio tigger con diferentes idiomas para recibir llamadas.

Aquí está la lógica dentro de un servicio:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root',
})

export class LanguageService {
    private _languageState: BehaviorSubject<Language> = new BehaviorSubject<Language>();

    constructor() {}

    setLanguageState(lang: Language) {
        this._languageState.next(lang);
    }

    onChangedLanguageState() {
       return this._languageState.asObservable();
    }
}

Y luego, en 1 componente, cuando se cambia el idioma, simplemente actualice el tema comothis.languageService.setLanguageState(lang).

En el componente 2 escuche los cambios comothis.languageService.onChangedLanguageState.subscribe(() => {// call http service })