Angular 管道参考资产

Question

我正在构建一个 Angular 4 Pipe 来支持国际化。我想将管道发布为 npm 模块，供其他人使用。管道将引用开发人员放入 /assets/i18n/<lang>.json 文件中的 json 数据，如下所示：

{
  "welcome" : "Welcome",
  "register" : "Register"
}

并像这样用作管道：

{{ 'welcome' | i18n }}

从导入的管道中引用 json 文件的最佳方法是什么？当我尝试使用 require('assets/i18n/' + lang + '.json') 从导入的模块加载 json 时，无法解析路径。我应该改用 HttpClient get 吗？如果是这样，我如何将 json 数据同步到管道？

感谢您的帮助。

Answer 1

我建议使用 HttpClient.get 分支。在这里，您可以使用 i18n 管道 + async 管道来获得最终结果。

第一步是在管道的转换函数中返回 Observable。

constructor(private http: HttpClient) { }

transform(input) {
  return this.http.get(...);
}

然后使用 i18n 管道和 async 管道自动订阅。

{{ 'welcome' | i18n | async }}

这里有一个例子demo.

Angular 管道参考资产

Angular Pipe reference assets

assets

pipe

angular