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/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> tagged strings, which can be processed just like any other\ntagged string.</p>\n\n\n \n\n\n \n <h2 id=\"entry-points\">Entry points<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/localize#entry-points\"><i class=\"material-icons\">link</i></a></h2>\n \n \n \n <section class=\"export-list\">\n <h3 id=\"primary\">Primary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/localize#primary\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/localize#primary-entry-point-exports\">@angular/localize</a></code></td>\n <td>\n \n <p>The <code>@angular/localize</code> package contains helpers and tools for localizing your application.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"secondary\">Secondary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/localize#secondary\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/localize/init\">@angular/localize/init</a></code></td>\n <td>\n \n <p>The <code>@angular/localize</code> package exposes the <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> function in the global namespace, which can\nbe used to tag i18n messages in your code that needs to be translated.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n\n <h2 id=\"primary-entry-point-exports\">Primary entry point exports<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/localize#primary-entry-point-exports\"><i class=\"material-icons\">link</i></a></h2>\n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"functions\">Functions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/localize#functions\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/localize/clearTranslations\">clearTranslations</a></code></td>\n <td>\n \n <p>Remove all translations for <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code>, if doing runtime translation.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/localize/loadTranslations\">loadTranslations</a></code></td>\n <td>\n \n <p>Load translations for use by <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code>, if doing runtime translation.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/localize/clearTranslations\n - api/localize/init\n - api/localize/init/$localize\n - api/localize/init/LocalizeFn\n - api/localize/init/TranslateFn\n - api/localize/loadTranslations\n-->\n<!-- links from this doc:\n - /api\n - api/localize#angularlocalize\n - api/localize#entry-points\n - api/localize#functions\n - api/localize#primary\n - api/localize#primary-entry-point-exports\n - api/localize#secondary\n - api/localize/clearTranslations\n - api/localize/init\n - api/localize/init/$localize\n - api/localize/loadTranslations\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates\n - https://github.com/angular/angular/edit/master/packages/localize/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/localize/PACKAGE.md\n-->"
|
|
} |