5 lines
10 KiB
JSON
5 lines
10 KiB
JSON
|
{
|
||
|
|
"id": "guide/migration-renderer",
|
||
|
|
"title": "Renderer to Renderer2 migration",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/migration-renderer.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</div>\n\n\n<div class=\"content\">\n <h1 id=\"renderer-to-renderer2-migration\"><code>Renderer</code> to <code><a href=\"api/core/Renderer2\" class=\"code-anchor\">Renderer2</a></code> migration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-renderer#renderer-to-renderer2-migration\"><i class=\"material-icons\">link</i></a></h1>\n<h2 id=\"migration-overview\">Migration Overview<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-renderer#migration-overview\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code>Renderer</code> class has been marked as deprecated since Angular version 4.\nThis section provides guidance on migrating from this deprecated API to the newer <code><a href=\"api/core/Renderer2\" class=\"code-anchor\">Renderer2</a></code> API and what it means for your app.</p>\n<h2 id=\"why-should-i-migrate-to-renderer2\">Why should I migrate to Renderer2?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-renderer#why-should-i-migrate-to-renderer2\"><i class=\"material-icons\">link</i></a></h2>\n<p>The deprecated <code>Renderer</code> class has been removed in version 9 of Angular, so it's necessary to migrate to a supported API.\nUsing <code><a href=\"api/core/Renderer2\" class=\"code-anchor\">Renderer2</a></code> is the recommended strategy because it supports a similar set of functionality to <code>Renderer</code>.\nThe API surface is quite large (with 19 methods), but the schematic should simplify this process for your applications.</p>\n<h2 id=\"is-there-action-required-on-my-end\">Is there action required on my end?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-renderer#is-there-action-required-on-my-end\"><i class=\"material-icons\">link</i></a></h2>\n<p>No.\nThe schematic should handle most cases with the exception of <code>Renderer.animate()</code> and <code>Renderer.setDebugInfo()</code>, which already aren't supported.</p>\n<h2 id=\"what-are-the-__ngrendererx-methods-why-are-they-necessary\">What are the <code>__ngRendererX</code> methods? Why are they necessary?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-renderer#what-are-the-__ngrendererx-methods-why-are-they-necessary\"><i class=\"material-icons\">link</i></a></h2>\n<p>Some methods either don't have exact equivalents in <code><a href=\"api/core/Renderer2\" class=\"code-anchor\">Renderer2</a></code>, or they correspond to more than one expression.\nFor example, both renderers have a <code>createElement()</code> method, but they're not equal because a call such as <code>renderer.createElement(parentNode, namespaceAndName)</code> in the <code>Renderer</code> corresponds to the following block of code in <code><a href=\"api/core/Renderer2\" class=\"code-anchor\">Renderer2</a></code>:</p>\n<code-example language=\"ts\">\nconst [namespace, name] = splitNamespace(namespaceAndName);\nconst el = renderer.createElement(name, namespace);\nif (parentNode) {\n renderer.appendChild(parentNode, el);\n}\nreturn el;\n</code-example>\n<p>Migration has to guarantee that the return values of functions and types of variables stay the same.\nTo handle the majority of cases safely, the schematic declares helper functions at the bottom of the user's file.\nThese helpers encapsulate your own logic and keep the replacements inside your code down to a single function call.\nHere's an example of how the <code>createElement()</code> migration looks:</p>\n<p><strong>Before:</strong></p>\n<code-example language=\"ts\">\npublic createAndAppendElement() {\n const el = this.renderer.createElem
|
||
|
|
}
|