本地化

在阅读本地化管道和本地化服务之前你应该了解本地化Key.

本地化key格式由两个部分组成,分别是资源名Key ResourceName::Key

如果你没有指定资源名称,它默认是在 environment.ts 中声明的 defaultResourceName.

  1. const environment = {
  2. //...
  3. localization: {
  4. defaultResourceName: 'MyProjectName',
  5. },
  6. };

所以这两个结果是一样的:

  1. <h1>{{ '::Key' | abpLocalization }}</h1>
  2. <h1>{{ 'MyProjectName::Key' | abpLocalization }}</h1>

使用本地化管道

你可以使用 abpLocalization 管道来获取本地化的文本. 例:

  1. <h1>{{ 'Resource::Key' | abpLocalization }}</h1>

管道将用本地化的文本替换Key.

你还可以指定一个默认值,如下所示:

  1. <h1>{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}</h1>

要使用插值,必须将插值作为管道参数给出. 例如:

本地化数据存储在键值对中:

  1. {
  2. //...
  3. AbpAccount: { // AbpAccount is the resource name
  4. Key: "Value",
  5. PagerInfo: "Showing {0} to {1} of {2} entries"
  6. }
  7. }

所以我们可以这样使用Key:

  1. <h1>{{ 'AbpAccount::PagerInfo' | abpLocalization:'20':'30':'50' }}</h1>
  2. <!-- Output: Showing 20 to 30 of 50 entries -->

使用本地化服务

首先应该从 @abp/ng.core 导入 LocalizationService.

  1. import { LocalizationService } from '@abp/ng.core';
  2. class MyClass {
  3. constructor(private localizationService: LocalizationService) {}
  4. }

之后你就可以使用本地化服务.

你可以将插值参数作为参数添加到 instant()get() 方法中.

  1. this.localizationService.instant('AbpIdentity::UserDeletionConfirmation', 'John');
  2. // with fallback value
  3. this.localizationService.instant(
  4. { key: 'AbpIdentity::UserDeletionConfirmation', defaultValue: 'Default Value' },
  5. 'John',
  6. );
  7. // Output
  8. // User 'John' will be deleted. Do you confirm that?

要获取Observable的本地化文本,应该使用 get 方法而不是 instant:

  1. this.localizationService.get('Resource::Key');
  2. // with fallback value
  3. this.localizationService.get({ key: 'Resource::Key', defaultValue: 'Default Value' });

使用配置状态

要使用 getLocalization 方法,你应该导入 ConfigState.

  1. import { ConfigState } from '@abp/ng.core';

然后你可以按以下方式使用它:

  1. this.store.selectSnapshot(ConfigState.getLocalization('ResourceName::Key'));

getLocalization 方法可以与 本地化keyLocalizationWithDefault 接口一起使用.

  1. this.store.selectSnapshot(
  2. ConfigState.getLocalization(
  3. {
  4. key: 'AbpIdentity::UserDeletionConfirmation',
  5. defaultValue: 'Default Value',
  6. },
  7. 'John',
  8. ),
  9. );

本地化资源存储在 ConfigStatelocalization 属性中.

RTL支持

从v2.9开始,ABP支持RTL. 如果使用v2.9及更高版本生成新项目,你无需进行任何更改. 如果要从早期版本迁移项目,请按照以下2个步骤操作:

步骤 1. 为 Bootstrap LRT和RTL创建Chunks

angular.json中找到样式配置确保项目中的chunks含有 bootstrap-rtl.minbootstrap-ltr.min:

  1. {
  2. "projects": {
  3. "MyProjectName": {
  4. "architect": {
  5. "build": {
  6. "options": {
  7. "styles": [
  8. {
  9. "input": "node_modules/@abp/ng.theme.shared/styles/bootstrap-rtl.min.css",
  10. "inject": false,
  11. "bundleName": "bootstrap-rtl.min"
  12. },
  13. {
  14. "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
  15. "inject": true,
  16. "bundleName": "bootstrap-ltr.min"
  17. },
  18. {
  19. "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
  20. "inject": true,
  21. "bundleName": "fontawesome-all.min"
  22. },
  23. {
  24. "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
  25. "inject": true,
  26. "bundleName": "fontawesome-v4-shims.min"
  27. },
  28. "apps/dev-app/src/styles.scss"
  29. ],
  30. }
  31. }
  32. }
  33. }
  34. }
  35. }
  36. #### 步骤 2. 清除AppComponent中延迟加载的Fontawesome
  37. 如果你如上所述为Fontawesome创建并且注入了chunks,就不再需要v2.9版本之前的实现的 `AppComponent` 延迟加载. 删除它们即可,新版的 `AppComponent` 如下所示:
  38. ```js
  39. import { Component } from '@angular/core';
  40. @Component({
  41. selector: 'app-root',
  42. template: `
  43. <abp-loader-bar></abp-loader-bar>
  44. <router-outlet></router-outlet>
  45. `,
  46. })
  47. export class AppComponent {}

另请参阅

下一步是什么?