Angular 2+ 动态 UI 文本

Question

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

不确定是否已经实现了一些东西，或者是否有更好的方法来实现它。我有 ng2-translate，但它不能通过管理屏幕实现可变文本的目的。

谢谢。

Answer 1

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

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 对象。

注意问号，它们是安全运算符，可以在处理请求时避免空错误。

Angular 2+ Dynamic UI Text