5 lines
8.1 KiB
JSON
5 lines
8.1 KiB
JSON
|
{
|
||
|
|
"id": "api/localize",
|
||
|
|
"title": "@angular/localize",
|
||
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/localize\", \"name\": \"@angular/localize\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/localize/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/localize/PACKAGE.md\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n<header class=\"api-header\">\n <h1 id=\"angularlocalize\">@angular/localize<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/localize#angularlocalize\"><i class=\"material-icons\">link</i></a></h1>\n <label class=\"api-type-label package\">package</label>\n \n \n \n</header>\n\n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n <p>The <code>@angular/localize</code> package contains helpers and tools for localizing your application.</p>\n\n <p>You should install this package using <code>ng add @angular/localize</code> if you need to tag text in your\napplication that you want to be translatable.</p>\n<p>The approach is based around the concept of tagging strings in code with a <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates\">template literal tag handler</a>\ncalled <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code>. The idea is that strings that need to be translated are “marked” using this tag:</p>\n<code-example language=\"ts\">\nconst message = $localize`Hello, World!`;\n</code-example>\n<hr>\n<p>This <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> identifier can be a real function that can do the translation at runtime, in the browser.\nBut, significantly, it is also a global identifier that survives minification.\nThis means it can act simply as a marker in the code that a static post-processing tool can use to replace\nthe original text with translated text before the code is deployed.</p>\n<p>For example, the following code:</p>\n<code-example language=\"ts\">\nwarning = $localize`${this.process} is not right`;\n</code-example>\n<p>could be replaced with:</p>\n<code-example language=\"ts\">\nwarning = \"\" + this.process + \", ce n'est pas bon.\";\n</code-example>\n<p>The result is that all references to <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> are removed, and there is <strong>zero runtime cost</strong> to rendering\nthe translated text.</p>\n<hr>\n<p>The Angular template compiler also generates <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> tagged strings rather than doing the translation itself.\nFor example, the following template:</p>\n<code-example language=\"html\">\n<h1 i18n>Hello, World!</h1>\n</code-example>\n<p>would be compiled to something like:</p>\n<code-example language=\"ts\">\nɵɵelementStart(0, \"h1\"); // <h1>\nɵɵi18n(1, $localize`Hello, World!`); // Hello, World!\nɵɵelementEnd(); // </h1>\n</code-example>\n<p>This means that after the Angular compiler has completed its work, all the template text marked with <code>i18n</code>\nattributes have been converted to <code><a href=\"api/local
|
||
|
|
}
|