Browse Source

docs(angular): change localization in angular docs

pull/3072/head
TheDiaval 7 years ago
parent
commit
1fc02674b6
  1. 50
      docs/en/Angular/Localization/Index.md

50
docs/en/Angular/Localization/Index.md

@ -9,12 +9,13 @@ There are three ways to use localization in your project:
Before you read about _the Localization Pipe_ and _the Localization Service_, you should know about localization keys. Before you read about _the Localization Pipe_ and _the Localization Service_, you should know about localization keys.
The Localization key format consists of 2 sections which are **Resource Name** and **Key**. The Localization key format consists of 2 sections which are **Resource Name** and **Key**.
`{{ ResourceName::Key }}` `ResourceName::Key`
> If you do not specify the resource name, it will be `defaultResourceName` which declared in _environment.ts_ > If you do not specify the resource name, it will be `defaultResourceName` which is declared in _environment.ts_
```ts ```ts
const environment = { const environment = {
//...
localization: { localization: {
defaultResourceName: 'MyProjectName', defaultResourceName: 'MyProjectName',
}, },
@ -39,16 +40,32 @@ You can use the `abpLocalization` pipe to get localized text as in this example:
The pipe will replace the key with the localized text. The pipe will replace the key with the localized text.
You can also specify a default value using [`LocalizationWithDefault`](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L34) interface as followed: You can also specify a default value as shown below:
```html ```html
<h1>{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}</h1> <h1>{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}</h1>
``` ```
To use interpolation, you must give the values for interpolation as pipe parameters: To use interpolation, you must give the values for interpolation as pipe parameters, for example:
Localization data is stored in key-value pairs:
```js
{
//...
AbpAccount: { // This is the resource name
Key: "Value",
PagerInfo: "Showing {0} to {1} of {2} entries"
}
}
```
So we can use this key like this:
```html ```html
<h1>{{ 'Resource::Key' | abpLocalization:'Parameter 1':'Parameter 2' }}</h1> <h1>{{ 'AbpAccount::PagerInfo' | abpLocalization:'20':'30':'50' }}</h1>
<!-- Output: Showing 20 to 30 of 50 entries -->
``` ```
### Using the Localization Service ### Using the Localization Service
@ -65,11 +82,19 @@ class MyClass {
After that, you are able to use localization service. After that, you are able to use localization service.
> You can add interpolation parameters as arguments to `instant()` and `get()` methods.
```ts ```ts
this.localizationService.instant('Resource::Key'); this.localizationService.instant('AbpIdentity::UserDeletionConfirmation', 'UserName');
// with fallback value // with fallback value
this.localizationService.instant({ key: 'Resource::Key', defaultValue: 'Default Value' }); this.localizationService.instant(
{ key: 'AbpIdentity::UserDeletionConfirmation', defaultValue: 'Default Value' },
'UserName',
);
// Output
// User 'UserName' will be deleted. Do you confirm that?
``` ```
To get a localized text as [_Observable_](https://rxjs.dev/guide/observable) use `get` method instead of `instant`: To get a localized text as [_Observable_](https://rxjs.dev/guide/observable) use `get` method instead of `instant`:
@ -99,10 +124,13 @@ this.store.selectSnapshot(ConfigState.getLocalization('ResourceName::Key'));
```ts ```ts
this.store.selectSnapshot( this.store.selectSnapshot(
ConfigState.getLocalization({ ConfigState.getLocalization(
key: 'ResourceName::Key', {
defaultValue: 'Default Value', key: 'ResourceName::Key',
}), defaultValue: 'Default Value',
},
...interpolationParameters,
),
); );
``` ```

Loading…
Cancel
Save