Angular 10 - 在同级组件之间共享数据

Question

我想在 2 个兄弟组件之间共享数据。

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

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

知道如何在组件 1 中的选择选项更改时在组件 2 中选择语言吗？

Answer 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库的文档以ngx-translate所有事件和属性的列表。

Answer 2

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

这是服务中的逻辑：

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