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库的documentation中获取所有事件和属性的列表。

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

收听更改

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

2 个答案: