57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
The `@angular/localize` package contains helpers and tools for localizing your application.
|
|
|
|
You should install this package using `ng add @angular/localize` if you need to tag text in your
|
|
application that you want to be translatable.
|
|
|
|
The approach is based around the concept of tagging strings in code with a [template literal tag handler][tagged-templates]
|
|
called `$localize`. The idea is that strings that need to be translated are “marked” using this tag:
|
|
|
|
```ts
|
|
const message = $localize`Hello, World!`;
|
|
```
|
|
|
|
---
|
|
|
|
This `$localize` identifier can be a real function that can do the translation at runtime, in the browser.
|
|
But, significantly, it is also a global identifier that survives minification.
|
|
This means it can act simply as a marker in the code that a static post-processing tool can use to replace
|
|
the original text with translated text before the code is deployed.
|
|
|
|
For example, the following code:
|
|
|
|
```ts
|
|
warning = $localize`${this.process} is not right`;
|
|
```
|
|
|
|
could be replaced with:
|
|
|
|
```ts
|
|
warning = "" + this.process + ", ce n'est pas bon.";
|
|
```
|
|
|
|
The result is that all references to `$localize` are removed, and there is **zero runtime cost** to rendering
|
|
the translated text.
|
|
|
|
---
|
|
|
|
The Angular template compiler also generates `$localize` tagged strings rather than doing the translation itself.
|
|
For example, the following template:
|
|
|
|
```html
|
|
<h1 i18n>Hello, World!</h1>
|
|
```
|
|
|
|
would be compiled to something like:
|
|
|
|
```ts
|
|
ɵɵelementStart(0, "h1"); // <h1>
|
|
ɵɵi18n(1, $localize`Hello, World!`); // Hello, World!
|
|
ɵɵelementEnd(); // </h1>
|
|
```
|
|
|
|
This means that after the Angular compiler has completed its work, all the template text marked with `i18n`
|
|
attributes have been converted to `$localize` tagged strings, which can be processed just like any other
|
|
tagged string.
|
|
|
|
[tagged-templates]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates
|