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