时间戳

首页 > 解决方案 > 从本地存储中获取数据并使用 ngx-translate 将其显示在视图中 | 角

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

问题描述

我有一个任务必须使用 ngx-translate 在 html 中显示来自 localstorage 的数据。我有一个带有控制器的后端 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);

我需要实现的是 eq

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

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

我有以不同值平台或库开头的键。在platform.component.html中，我需要显示所有以“平台”开头的内容，而在library.component.html中，所有内容都以“图书馆”开头

到目前为止，我的想法还没有奏效，它甚至没有表现出来，因为它是一种耻辱。我不知道 Angular 中的 servis 应该如何或一些 ngx-translate 加载器来达到计划的效果。有人可以帮我吗？显示解决方案或示例解决方案的方法。

标签： htmlangulartypescriptlocal-storagengx-translate

解决方案

您可以通过这种方式从本地存储中获取数据

在你的 component.ts

public title;

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

在您的 HTML 中

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

推荐阅读