从本地存储中获取数据并使用 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');
}