From 91f4d412f0288f1f2b2185694b3bd413ce514cb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E4=B8=96=E5=86=9B?=
 <30999793+AllForNothing@users.noreply.github.com>
Date: Wed, 30 Jun 2021 10:22:48 +0800
Subject: [PATCH] Improve i18n service (#15215)

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 src/portal/src/app/app.component.ts           | 45 +++++++------------
 .../navigator/navigator.component.ts          |  4 +-
 2 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/portal/src/app/app.component.ts b/src/portal/src/app/app.component.ts
index d1cee0d8f..c75d4553c 100644
--- a/src/portal/src/app/app.component.ts
+++ b/src/portal/src/app/app.component.ts
@@ -73,36 +73,25 @@ export class AppComponent {
         });
     }
     initLanguage() {
-        /**
-         * due to the bug(https://github.com/ngx-translate/core/issues/1258) of translate module
-         *  we have to call use method for all supported languages
-         *  use method will load related language json from backend server
-         */
-        const usedLangs: Array<Observable<any>> = [];
-        supportedLangs.forEach(lang => {
-            usedLangs.push(this.translate.use(lang));
-        });
-        forkJoin(usedLangs).subscribe(() => { // use target lang after all langs json loaded
-            this.translate.addLangs(supportedLangs);
-            this.translate.setDefaultLang(DeFaultLang);
-            let selectedLang: string = DeFaultLang;
-            if (localStorage && localStorage.getItem(DEFAULT_LANG_LOCALSTORAGE_KEY)) {// If user has selected lang, then directly use it
-                selectedLang = localStorage.getItem(DEFAULT_LANG_LOCALSTORAGE_KEY);
-            } else {// If user has not selected lang, then use browser language(if contained in supportedLangs)
-                const browserCultureLang: string = this.translate
-                    .getBrowserCultureLang()
-                    .toLowerCase();
-                if (browserCultureLang && browserCultureLang.trim() !== "") {
-                    if (supportedLangs && supportedLangs.length > 0) {
-                        if (supportedLangs.find(lang => lang === browserCultureLang)) {
-                            selectedLang = browserCultureLang;
-                        }
+        this.translate.addLangs(supportedLangs);
+        this.translate.setDefaultLang(DeFaultLang);
+        let selectedLang: string = DeFaultLang;
+        if (localStorage && localStorage.getItem(DEFAULT_LANG_LOCALSTORAGE_KEY)) {// If user has selected lang, then directly use it
+            selectedLang = localStorage.getItem(DEFAULT_LANG_LOCALSTORAGE_KEY);
+        } else {// If user has not selected lang, then use browser language(if contained in supportedLangs)
+            const browserCultureLang: string = this.translate
+                .getBrowserCultureLang()
+                .toLowerCase();
+            if (browserCultureLang && browserCultureLang.trim() !== "") {
+                if (supportedLangs && supportedLangs.length > 0) {
+                    if (supportedLangs.find(lang => lang === browserCultureLang)) {
+                        selectedLang = browserCultureLang;
                     }
                 }
             }
-            localStorage.setItem(DEFAULT_LANG_LOCALSTORAGE_KEY, selectedLang);
-            this.translate.use(selectedLang);
-            }
-        );
+        }
+        localStorage.setItem(DEFAULT_LANG_LOCALSTORAGE_KEY, selectedLang);
+        // use method will load related language json from backend server
+        this.translate.use(selectedLang);
     }
 }
diff --git a/src/portal/src/app/shared/components/navigator/navigator.component.ts b/src/portal/src/app/shared/components/navigator/navigator.component.ts
index 0eb911fd4..200462937 100644
--- a/src/portal/src/app/shared/components/navigator/navigator.component.ts
+++ b/src/portal/src/app/shared/components/navigator/navigator.component.ts
@@ -149,7 +149,9 @@ export class NavigatorComponent implements OnInit {
     switchLanguage(lang: string): void {
         this.selectedLang = lang;
         localStorage.setItem(DEFAULT_LANG_LOCALSTORAGE_KEY, lang);
-        this.translate.use(lang);
+        // due to the bug(https://github.com/ngx-translate/core/issues/1258) of translate module
+        // have to reload
+        this.translate.use(lang).subscribe(() => window.location.reload());
     }
 
     // Handle the home action