Angular 10 - Compartilhando dados entre componentes irmãos

Question

Quero compartilhar dados entre 2 componentes irmãos.

• Componente 1: Meu componente 1 é minha barra de navegação e tem uma opção para alterar o idioma do aplicativo (usando ngx-translate), esta opção é uma seleção com opções diferentes.
• Componente 2: Meu componente 2 é um blog com postagens diferentes, essas postagens são salvas em um banco de dados MySQL, existem 2 idiomas possíveis, as postagens são salvas em tabelas diferentes do banco de dados dependendo da linguagem em que foram escritas.

Então, o que estamos tentando fazer é dependendo do idioma selecionado no componente 1 fazer uma requisição http para o backend passando o idioma real selecionado para obter os posts da tabela correspondente.

Alguma ideia de como obter o idioma selecionado no meu componente 2 quando a opção de seleção muda no meu componente 1?

Answer 1

Já que você está usando ngx-translate, você pode usar o serviço para saber qual idioma está selecionado, em vez de depender do seu componente.

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

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

Confira a documentação da ngx-translatebiblioteca para uma lista de todos os eventos e propriedades.

Answer 2

Aqui você pode usar RxJS. Assim você pode fazer um serviço que tenha BehaviourSubject. E então, quando você alterar o valor no componente 1, você atualizará este valor BehaviourSubject. Assim, em 2 componentes você pode ouvir as mudanças de valor do assunto e serviço tigger com idioma diferente para ser chamado.

Aqui está a lógica dentro de um serviço:

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();
    }
}

E então em 1 componente quando o idioma é alterado, basta atualizar o assuntothis.languageService.setLanguageState(lang).

No 2 componente, ouça as mudanças conformethis.languageService.onChangedLanguageState.subscribe(() => {// call http service })