5 lines
22 KiB
JSON
5 lines
22 KiB
JSON
|
{
|
|||
|
|
"id": "guide/static-query-migration",
|
|||
|
|
"title": "Static query migration guide",
|
|||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/static-query-migration.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=\"static-query-migration-guide\">Static query migration guide<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/static-query-migration#static-query-migration-guide\"><i class=\"material-icons\">link</i></a></h1>\n<p>\n<strong>Important note for library authors: This migration is especially crucial for library authors to facilitate their users upgrading to version 9 when it becomes available.</strong></p>\n<p>In version 9, the default setting for <code>@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a></code> and <code>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a></code> queries is changing in order to fix buggy and surprising behavior in queries (read more about that <a href=\"guide/static-query-migration#what-does-this-flag-mean\">here</a>).</p>\n<p>In preparation for this change, in version 8, we are migrating all applications and libraries to explicitly specify the resolution strategy for <code>@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a></code> and <code>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a></code> queries.</p>\n<p>Specifically, this migration adds an explicit \"static\" flag that dictates when that query's results should be assigned.\nAdding this flag will ensure your code works the same way when upgrading to version 9.</p>\n<p>Before:</p>\n<code-example>\n// <a href=\"api/animations/query\" class=\"code-anchor\">query</a> results sometimes available in `ngOnInit`, sometimes in `ngAfterViewInit` (based on template)\n@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>('foo') foo: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>;\n</code-example>\n<p>After:</p>\n<code-example>\n// <a href=\"api/animations/query\" class=\"code-anchor\">query</a> results available in ngOnInit\n@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>('foo', {<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: true}) foo: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>;\n\nOR\n\n// <a href=\"api/animations/query\" class=\"code-anchor\">query</a> results available in ngAfterViewInit\n@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>('foo', {<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: false}) foo: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>;\n</code-example>\n<p>Starting with version 9, the <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> flag will default to false.\nAt that time, any <code>{<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: false}</code> flags can be safely removed, and we will have a schematic that will update your code for you.</p>\n<p>Note: this flag only applies to <code>@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a></code> and <code>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a></code> queries specifically, as <code>@<a href=\"api/core/ViewChildren\" class=\"code-anchor\">ViewChildren</a></code> and <code>@<a href=\"api/core/ContentChildren\" class=\"code-anchor\">ContentChildren</a></code> queries do not have a concept of static and dynamic (they are always resolved as if they are \"dynamic\").</p>\n<h2 id=\"faq\">FAQ<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/static-query-migration#faq\"><i class=\"material-icons\">link</i></a></h2>\n<a id=\"what-to-do-with-todo\"></a>\n<h3 id=\"what-should-i-do-if-i-see-a--todo-add-static-flag--comment-printed-by-the-schematic\">What should I do if I see a <code>/* TODO: add <a href=\"ap
|
|||
|
|
}
|