Angular 10 - 在兄弟组件之间共享数据答案

【问题标题】：Angular 10 - Sharing data between sibling componentsAngular 10 - 在兄弟组件之间共享数据
【发布时间】：2021-01-04 03:39:11
【问题描述】：

我想在 2 个同级组件之间共享数据。

组件 1： 我的组件 1 是我的导航栏，它有一个更改应用程序语言的选项（使用 ngx-translate），此选项是具有不同选项的选择。
组件 2： 我的组件 2 是一个包含不同帖子的博客，这些帖子保存在 MySQL 数据库中，有 2 种可能的语言，帖子根据语言保存在数据库的不同表中写的。

因此，我们要做的是根据组件 1 中选择的语言向后端发送 http 请求，传递选择的实际语言以从对应表中获取帖子。

知道当组件 1 中的选择选项发生变化时如何在组件 2 中选择语言？

【问题讨论】：

您可以检查stackoverflow.com/questions/63545305/… 看起来像是重复的
谢谢@KamranKhatti，但是当它改变时这会占用我的选择值吗？因为我们需要在组件 2 上获取每次更改时选择的语言的值。
Idk 当组件 1 的值被触发时，您可以使用 Input、Output 装饰器将该值传递给组件 2，看起来很简单。

标签： javascript angular typescript

【解决方案1】：

由于您使用的是ngx-translate，因此您可以使用它的服务来了解选择了哪种语言，而不是依赖于您的组件。

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

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

查看ngx-translate 库的documentation 以获取所有事件和属性的列表。

【讨论】：

你好@David Fontes，谢谢你的回答，这解决了我的问题:)

【解决方案2】：

在这里你可以使用 RxJS。因此，您可以制作具有 BehaviourSubject 的服务。然后，当您更改 1 组件 中的值时，您将更新此 BehaviourSubject 值。所以在2组件中可以监听到主题的值变化，触发不同语言的服务被调用。

这是服务中的逻辑：

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

然后在1个组件中切换语言时只需将主题更新为this.languageService.setLanguageState(lang).

在2组件中以this.languageService.onChangedLanguageState.subscribe(() => {// call http service })收听变化

【讨论】：