Angular中如何将选中的语言存储到Local Storage

Let's adjust your code to implement the required language persistence and fallback behavior. I'll break this down into initialization and update logic, assuming you're working with Angular (given the translate service and platformId usage):

Step 1: Update Initialization Logic #

First, we need to handle the language selection priority on component initialization:

• Check for a saved language in Local Storage
• If none exists, use the browser's preferred language
• If the browser language isn't in your supported list, fall back to 'en'

Here's how to integrate this into your component (add this to ngOnInit or your initialization method):

import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { isPlatformBrowser } from '@angular/common';

// ... your component decorator and other imports

export class YourComponent implements OnInit {
  public languages = [
    { name: 'English', code: 'en', icon: 'assets/images/flags/en.png' },
    { name: 'French', code: 'fr', icon: 'assets/images/flags/fr.png' },
    { name: 'Русский', code: 'ru', icon: 'assets/images/flags/ru.png' }
  ];
  selectedLanguage: any;

  constructor(
    private translate: TranslateService,
    @Inject(PLATFORM_ID) private platformId: object
  ) {}

  ngOnInit(): void {
    let initialLang = 'en'; // Default fallback

    if (isPlatformBrowser(this.platformId)) {
      // 1. Check Local Storage for saved language
      const savedLang = localStorage.getItem('selectedLanguage');
      if (savedLang) {
        initialLang = savedLang;
      } else {
        // 2. Get browser language (strip regional code if needed, e.g. 'en-US' -> 'en')
        const browserLang = navigator.language.split('-')[0];
        // 3. Check if browser language is in supported list
        const isBrowserLangSupported = this.languages.some(lang => lang.code === browserLang);
        if (isBrowserLangSupported) {
          initialLang = browserLang;
        }
      }
    }

    // Set the initial language for translate service
    this.translate.setDefaultLang(initialLang);
    this.translate.use(initialLang);
    // Set selectedLanguage to match the initial language
    this.selectedLanguage = this.languages.find(lang => lang.code === initialLang);
  }

Step 2: Update changeLanguage Method to Persist to Local Storage #

Modify your existing method to save the selected language to Local Storage whenever the user changes it:

changeLanguage(language: any) {
    if (isPlatformBrowser(this.platformId)) {
      this.translate.use(language.code);
      // Save selected language to Local Storage
      localStorage.setItem('selectedLanguage', language.code);
    }
    this.selectedLanguage = language;
  }
}

Key Notes: #

• We use isPlatformBrowser to ensure we only access Local Storage when running in the browser (avoids errors during server-side rendering if applicable)
• When parsing the browser language, we split on '-' to handle regional variants like 'en-US' or 'fr-CA' and match against your 2-letter language codes
• The default fallback 'en' is only used if neither a saved language nor a supported browser language is found

内容的提问来源于stack exchange，提问作者Gintaras