时间戳

首页 > 解决方案 > Angular 2+ 动态 UI 文本

angular - Angular 2+ 动态 UI 文本

问题描述

我正在开发一个不是多语言的应用程序，但客户要求能够通过管理界面更改标签、文本甚至通知。所以我想到了可以在应用程序加载时从服务器获取并绑定所有标签、文本和通知的资源文件。

不确定是否已经实施了某些事情，或者是否有更好的方法来实现这一点。我有 ng2-translate 但它不能通过管理屏幕达到改变文本的目的。

谢谢你。

标签： angularresourcesdynamic-text

解决方案

所有文本都可以使用模板绑定显示，例如{{ myLabel }}. myLabel反过来，可以根据对接受语言参数的服务器的请求进行分配，或者您可以拥有本地存储的值，如果选择了某种语言设置，则使用这些值。服务器选项更易于管理 IMO。

async setText(languageId: number) {
  this.text = await this.http.get('yourUrl', {
    params: { languageId: languageId.toString()} }).toPromise();
}

文本可以是您所有文本的对象，例如

"text": [
 "notifications": ["warningNotification": "whatever", ... 
]

您可以在整个模板中显示这些：

<div id="warningDiv">{{ text?.notifications?.warning }}</div>

并且始终遵循相同的模式，text根据语言交付不同的 json 对象。

请注意作为安全运算符的问号，以避免在处理请求时出现空错误。

推荐阅读