5 lines
9.4 KiB
JSON
5 lines
9.4 KiB
JSON
{
|
|
"id": "guide/migration-dynamic-flag",
|
|
"title": "Dynamic queries flag migration",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/migration-dynamic-flag.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=\"dynamic-queries-flag-migration\">Dynamic queries flag migration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-dynamic-flag#dynamic-queries-flag-migration\"><i class=\"material-icons\">link</i></a></h1>\n<h2 id=\"what-does-this-migration-do\">What does this migration do?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-dynamic-flag#what-does-this-migration-do\"><i class=\"material-icons\">link</i></a></h2>\n<p>In Angular version 8, a schematic added <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> flags to all <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.\nThis was the first step towards changing the default behavior.\nWith version 9, the default value changes to <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: false</code> and the flag becomes optional.</p>\n<p>This schematic scans classes in the compilation and for each class, checks if the members have a <code>@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>()</code> or <code>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>()</code> query with the <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> flag set to <code>false</code>.\nIf so, the schematic removes the flag, as it now matches the default.</p>\n<p><strong>Before:</strong></p>\n<code-example language=\"ts\">\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\n@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>('bar', {<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: true}) bar: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>;\n</code-example>\n<p><strong>After:</strong></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>('foo') foo: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>;\n\n// this <a href=\"api/animations/query\" class=\"code-anchor\">query</a> doesn't change because the <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> value is true\n@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>('bar', {<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: true}) bar: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>;\n</code-example>\n<p>Note that the flag is not supported in <code>@<a href=\"api/core/ViewChildren\" class=\"code-anchor\">ViewChildren</a>()</code> or <code>@<a href=\"api/core/ContentChildren\" class=\"code-anchor\">ContentChildren</a>()</code> queries, so the schematic will not check these properties.</p>\n<h2 id=\"why-is-this-migration-necessary\">Why is this migration necessary?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-dynamic-flag#why-is-this-migration-necessary\"><i class=\"material-icons\">link</i></a></h2>\n<p>This schematic performs a code cleanup to remove <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> flags that match the default, as they are no longer necessary.\nFunctionally, the code change should be a noop.</p>\n<p>Before version 9, Angular figured out the static or dynamic nature of a query automatically, based on how the template was written.\nLooking at templates in this way, however, caused buggy and surprising behavior (see more about that in the <a href=\"guide/static-query-migration#what-does-this-flag-mean\">Static Query Migration Guide</a>).\nAs of version 9, Angular uses dynamic queries (<code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: false</code>) by default, which simplifies queries.\nDevelopers can still explicitly set a query to <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: true</code> if necessary.</p>\n<div class=\"alert is-helpful\">\n<h3 id=\"what-is-the-difference-between-static-and-dynamic-queries\">What is the difference between static and dynamic queries?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-dynamic-flag#what-is-the-difference-between-static-and-dynamic-queries\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> option 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 determines when the query results become available.</p>\n<p>With static queries (<code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: true</code>), the query resolves once the view has been created, but before change detection runs.\nThe result, though, will never be updated to reflect changes to your view, such as changes to <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> and <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> blocks.</p>\n<p>With dynamic queries (<code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: false</code>), the query resolves after either <code>ngAfterViewInit()</code> or <code>ngAfterContentInit()</code> 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> respectively.\nThe result will be updated for changes to your view, such as changes to <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> and <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> blocks.</p>\n<p>For more information, see the following entries in the\n<a href=\"guide/static-query-migration\">Static Query Migration Guide</a>:</p>\n<ul>\n<li>\n<p><a href=\"guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false\">How do I choose which <code>static</code> flag value to use: <code>true</code> or <code>false</code>?</a></p>\n</li>\n<li>\n<p><a href=\"guide/static-query-migration#is-there-a-case-where-i-should-use-static-true\">Is there a case where I should use <code>{static: true}</code>?</a></p>\n</li>\n</ul>\n</div>\n<h2 id=\"what-does-this-mean-for-libraries\">What does this mean for libraries?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-dynamic-flag#what-does-this-mean-for-libraries\"><i class=\"material-icons\">link</i></a></h2>\n<p>In order to support applications that are still running with version 8, the safest option for libraries is to retain the <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> flag to keep the resolution timing consistent.</p>\n<ul>\n<li>\n<p><em>Libraries on version 9 with applications running version 8: </em></p>\n<p>The schematic won't run on libraries.\nAs long as libraries retain their <code><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> flags from version 8, they should work with apps on 8.</p>\n</li>\n<li>\n<p><em>Libraries on version 8 with applications running version 9: </em></p>\n<p>Libraries will have explicit flags defined.\nThe behavior with explicit flags has not changed.</p>\n</li>\n</ul>\n<h3 id=\"what-about-applications-using-non-migrated-libraries\">What about applications using non-migrated libraries?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-dynamic-flag#what-about-applications-using-non-migrated-libraries\"><i class=\"material-icons\">link</i></a></h3>\n<p>Because this is a code cleanup that is a noop, non-migrated libraries will work the same either way.</p>\n\n \n</div>\n\n<!-- links to this doc:\n-->\n<!-- links from this doc:\n - api/animations/query\n - api/common/NgForOf\n - api/common/NgIf\n - api/core/ContentChild\n - api/core/ContentChildren\n - api/core/ElementRef\n - api/core/ViewChild\n - api/core/ViewChildren\n - api/upgrade/static\n - guide/migration-dynamic-flag#dynamic-queries-flag-migration\n - guide/migration-dynamic-flag#what-about-applications-using-non-migrated-libraries\n - guide/migration-dynamic-flag#what-does-this-mean-for-libraries\n - guide/migration-dynamic-flag#what-does-this-migration-do\n - guide/migration-dynamic-flag#what-is-the-difference-between-static-and-dynamic-queries\n - guide/migration-dynamic-flag#why-is-this-migration-necessary\n - guide/static-query-migration\n - guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false\n - guide/static-query-migration#is-there-a-case-where-i-should-use-static-true\n - guide/static-query-migration#what-does-this-flag-mean\n - https://github.com/angular/angular/edit/master/aio/content/guide/migration-dynamic-flag.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |