从本地存储中获取数据并使用 ngx-translate | 将其显示在视图中Angular

Question

我有一个任务必须使用 ngx-translate 在 html 中显示来自本地存储的数据。我有一个后端 spring-boot 应用程序，它带有一个控制器，可以将从数据库下载的数据发送到前端。此数据存储在本地存储中。它们是文字。我与 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);

我需要实现的是e.q

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

这应该显示“Platform.Title”的值 - 这里是“Title”

我有以不同值 Platform 或 Library 开头的密钥。在 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');
}

从本地存储中获取数据并使用 ngx-translate | 将其显示在视图中Angular

Get data from localstorage and display it in view using ngx-translate | Angular

html

local-storage

typescript

ngx-translate

angular