5 lines
7.2 KiB
JSON
5 lines
7.2 KiB
JSON
{
|
|
"id": "api/localize/init/$localize",
|
|
"title": "$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 { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/localize/init\", \"name\": \"@angular/localize/init\" } },\n { \"@type\": \"ListItem\", \"position\": 4, \"item\": { \"@id\": \"https://angular.io/api/localize/init/$localize\", \"name\": \"$localize\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/localize\">@angular/localize</a> > <a href=\"api/localize/init\">@angular/localize/init</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/localize/src/localize/src/localize.ts?message=docs(localize)%3A%20describe%20your%20change...#L144-L156\" 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/src/localize/src/localize.ts#L144-L156\" 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=\"localize\">$localize<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/localize/init/$localize#localize\"><i class=\"material-icons\">link</i></a></h1>\n <label class=\"api-type-label global\">global</label>\n <label class=\"api-type-label const\">const</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>Tag a template literal string for localization.</p>\n\n <p><a href=\"api/localize/init/$localize#description\">See more...</a></p>\n </section>\n \n \n \n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\">\n const $localize: LocalizeFn;\n </code-example>\n\n \n\n \n \n<section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/localize/init/$localize#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>For example:</p>\n<code-example language=\"ts\">\n$localize `some string to localize`\n</code-example>\n<p><strong>Providing meaning, description and id</strong></p>\n<p>You can optionally specify one or more of <code>meaning</code>, <code>description</code> and <code>id</code> for a localized\nstring by pre-pending it with a colon delimited block of the form:</p>\n<code-example language=\"ts\">\n$localize`:meaning|description@@id:source message text`;\n\n$localize`:meaning|:source message text`;\n$localize`:description:source message text`;\n$localize`:@@id:source message text`;\n</code-example>\n<p>This format is the same as that used for <code>i18n</code> markers in Angular templates. See the\n<a href=\"guide/i18n#mark-text-for-translations\">Angular 18n guide</a>.</p>\n<p><strong>Naming placeholders</strong></p>\n<p>If the template literal string contains expressions, then the expressions will be automatically\nassociated with placeholder names for you.</p>\n<p>For example:</p>\n<code-example language=\"ts\">\n$localize `Hi ${name}! There are ${items.length} items.`;\n</code-example>\n<p>will generate a message-source of <code>Hi {$PH}! There are {$PH_1} items</code>.</p>\n<p>The recommended practice is to name the placeholder associated with each expression though.</p>\n<p>Do this by providing the placeholder name wrapped in <code>:</code> characters directly after the\nexpression. These placeholder names are stripped out of the rendered localized string.</p>\n<p>For example, to name the <code>items.length</code> expression placeholder <code>itemCount</code> you write:</p>\n<code-example language=\"ts\">\n$localize `There are ${items.length}:itemCount: items`;\n</code-example>\n<p><strong>Escaping colon markers</strong></p>\n<p>If you need to use a <code>:</code> character directly at the start of a tagged string that has no\nmetadata block, or directly after a substitution expression that has no name you must escape\nthe <code>:</code> by preceding it with a backslash:</p>\n<p>For example:</p>\n<code-example language=\"ts\">\n// message has a metadata block so no need to escape colon\n$localize `:some description::this message starts with a colon (:)`;\n// no metadata block so the colon must be escaped\n$localize `\\:this message starts with a colon (:)`;\n</code-example>\n<code-example language=\"ts\">\n// named substitution so no need to escape colon\n$localize `${label}:label:: ${}`\n// anonymous substitution so colon must be escaped\n$localize `${label}\\: ${}`\n</code-example>\n<p><strong>Processing localized strings:</strong></p>\n<p>There are three scenarios:</p>\n<ul>\n<li>\n<p><strong>compile-time inlining</strong>: the <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> tag is transformed at compile time by a\ntranspiler, removing the tag and replacing the template literal string with a translated\nliteral string from a collection of translations provided to the transpilation tool.</p>\n</li>\n<li>\n<p><strong>run-time evaluation</strong>: the <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> tag is a run-time function that replaces and\nreorders the parts (static strings and expressions) of the template literal string with strings\nfrom a collection of translations loaded at run-time.</p>\n</li>\n<li>\n<p><strong>pass-through evaluation</strong>: the <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> tag is a run-time function that simply evaluates\nthe original template literal string without applying any translations to the parts. This\nversion is used during development or where there is no need to translate the localized\ntemplate literals.</p>\n</li>\n</ul>\n\n \n</section>\n\n\n \n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/localize\n - api/localize/clearTranslations\n - api/localize/init\n - api/localize/loadTranslations\n - guide/angular-compiler-options\n - guide/migration-localize\n-->\n<!-- links from this doc:\n - /api\n - api/localize\n - api/localize/init\n - api/localize/init/$localize#description\n - api/localize/init/$localize#localize\n - guide/i18n#mark-text-for-translations\n - https://github.com/angular/angular/edit/master/packages/localize/src/localize/src/localize.ts?message=docs(localize)%3A%20describe%20your%20change...#L144-L156\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/localize/src/localize/src/localize.ts#L144-L156\n-->"
|
|
} |