從本地存儲中獲取數據並使用 ngx-translate 將其顯示在視圖中 | Angular

Question

我有一個任務必須使用 ngx-translate 在 html 中顯示來自本地存儲的數據。 我有一個后端 spring-boot 應用程序和一個 controller 將從數據庫下載的數據發送到前端。 此數據存儲在本地存儲中。 它們是文字。 我與 Angular 幾乎沒有共同之處。我在 Java 工作，但我需要這樣做：/ 我請求您的理解。

localstorage:

          key            |          value
--------------------------------------------------
Platform.Title           |         "Title"
Platform.Home            |         "Home"
Platform.Dashboard       |         "Dashboard"
Library.Title            |         "Library"
Library.Home             |         "Home"
Library.Dashboard        |         "Dashboard"

我需要做的是：提供服務以從本地存儲中獲取數據，我知道我必須這樣做

localstorage.get(key);

我需要實現的是 eq

<mat-card-title>{{'Platform.Title' | translate }}</mat-card-title>

這應該顯示“Platform.Title”的值 - 這里是“Title”

我有以不同值平台或庫開頭的鍵。 在platform.component.html中，我需要顯示所有以“Platform”開頭的內容，在library.component.html中，所有內容都以“Library”開頭

到目前為止，我的想法還沒有奏效，它甚至沒有表現出來，因為它是一種恥辱。 我不知道 Angular 中的 servis 應該如何或一些 ngx-translate 加載程序來達到計划的效果。 有人可以幫我嗎？ 顯示解決方案或示例解決方案的方法。

Answer 1

您可以通過這種方式從本地存儲中獲取數據

在你的 component.ts

public title;

ngOnInit(){
  this.title = localStorage.getItem('KEY');
}

在你的 HTML

<mat-card-title>{{title | translate }}</mat-card-title>

Answer 2

在您的應用模塊中添加

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);}

在您的應用組件中添加

 constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
}