Angular 2中字符串的最佳实践

Question

我正在学习Angular 2，并且想知道存储字符串的最佳实践。我在整个应用程序中使用各种字符串：有些直接放置在HTML元素中，例如

// sample.html
<h1>This is my title</h1>

其他字符串存储在组件模型中并与之绑定，例如：

// boundSample.html
<h1>{{myTitle}}</h1>

// boundSample.component.ts
import ...

@Component({
   templateUrl: 'boundSample.html';
})
export class BoundSampleComponent {
  myTitle = 'This is another title';
}

我的担忧是我的字符串分散在整个应用程序中。我来自C#/WPF背景，习惯于将我的字符串放在一个单独的位置（例如strings.xaml），我可以将其导入到代码和UI标记中（即WPF的XAML，Angular的HTML）。这极大地有助于可维护性和国际化。

此外，快速查看Angular 2中的国际化建议使用i18n属性和i18n工具。这假定所有我的字符串都在HTML中定义，但如果我想在代码中使用其中一些字符串呢...

我该如何在Angular2中定义一个单一位置的字符串，以便我可以在代码中访问这些字符串并利用国际化工具？

- James B

---

以下本地化库是否能帮助您实现您想要的功能？https://github.com/robisim74/angular2localization/ - Peza

只是提供一个替代方案。我们正在我们当前的项目中使用这个库：https://github.com/ocombe/ng2-translate/，但是angular2localization看起来也非常功能丰富（在积极的意义上）。 - meistermeier

https://angular.io/docs/ts/latest/cookbook/i18n.html - Günter Zöchbauer

Answer 1

您可以搜索一些工具，其中有一些实现了您想要的功能并且质量很好。但是，如果您想按照自己的方式进行操作，只需按照以下步骤进行：

1. 将字符串存储在 XAML / JSON / YAML / 等文件中，其中存储您的字符串。如果您使用 webpack，请使用适当的加载器为您处理这些内容。如果没有，则需要自己解析此文件。 2. 创建一个服务，该服务能够从文件中获取信息（我猜构造函数中），并具有返回基于字符串标记的字符串的函数。 3. 创建一个 pipe，它根据 token 返回一个字符串。 4. 在 HTML 中使用 Pipe，在 TypeScript 文件中使用 Service。

i18n-没问题，只需将语言传递给服务函数/在服务中订阅语言更改 observable。

实现很简单。但请三思：您可以使用已经存在的解决方案。

- smnbbrv