5 lines
29 KiB
JSON
5 lines
29 KiB
JSON
|
{
|
||
|
|
"id": "guide/ivy-compatibility-examples",
|
||
|
|
"title": "Ivy compatibility examples",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/ivy-compatibility-examples.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=\"ivy-compatibility-examples\">Ivy compatibility examples<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy-compatibility-examples#ivy-compatibility-examples\"><i class=\"material-icons\">link</i></a></h1>\n<p>This appendix is intended to provide more background on Ivy changes. Many of these examples list error messages you may see, so searching by error message might be a good idea if you are debugging.</p>\n<div class=\"alert is-critical\">\nNOTE: Most of these issues affect a small percentage of applications encountering unusual or rare edge cases.\n</div>\n<a id=\"content-children-descendants\"></a>\n<h2 id=\"contentchildren-queries-only-match-direct-children-by-default\">@ContentChildren queries only match direct children by default<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy-compatibility-examples#contentchildren-queries-only-match-direct-children-by-default\"><i class=\"material-icons\">link</i></a></h2>\n<h3 id=\"basic-example-of-change\">Basic example of change<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy-compatibility-examples#basic-example-of-change\"><i class=\"material-icons\">link</i></a></h3>\n<p>Let's say a component (<code>Comp</code>) has a <code>@<a href=\"api/core/ContentChildren\" class=\"code-anchor\">ContentChildren</a></code> query for <code>'foo'</code>:</p>\n<code-example language=\"html\">\n<comp>\n <div>\n <div #foo></div> <!-- matches in old runtime, not in new runtime -->\n </div>\n</comp>\n</code-example>\n<p>In the previous runtime, the <code><div></code> with <code>#foo</code> would match.\nWith Ivy, that <code><div></code> does not match because it is not a direct child of <code><comp></code>.</p>\n<h3 id=\"background\">Background<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy-compatibility-examples#background\"><i class=\"material-icons\">link</i></a></h3>\n<p>By default, <code>@<a href=\"api/core/ContentChildren\" class=\"code-anchor\">ContentChildren</a></code> queries have the <code>descendants</code> flag set to <code>false</code>.</p>\n<p>In the previous rendering engine, \"descendants\" referred to \"descendant directives\".\nAn element could be a match as long as there were no other directives between the element and the requesting directive.\nThis made sense for directives with nesting like tabs, where nested tab directives might not be desirable to match.\nHowever, this caused surprising behavior for users because adding an unrelated directive like <code><a href=\"api/common/NgClass\" class=\"code-anchor\">ngClass</a></code> to a wrapper element could invalidate query results.</p>\n<p>For example, with the content query and template below, the last two <code>Tab</code> directives would not be matches:</p>\n<code-example>\n@<a href=\"api/core/ContentChildren\" class=\"code-anchor\">ContentChildren</a>(Tab, {descendants: false}) tabs: <a href=\"api/core/QueryList\" class=\"code-anchor\">QueryList</a><Tab>\n</code-example>\n<code-example>\n<tab-list>\n <div>\n <tab> One </tab> <!-- match (nested in element) -->\n </div>\n <tab> <!-- match (top level) -->\n <tab> A </tab> <!-- not a match (nested in tab) -->\n </tab>\n <div [<a href=\"api/common/NgClass\" class=\"code-anchor\">ngClass</a>]=\"classes\">\n <tab> Two </tab> <!-- not a match (nested in <a href=\"api/common/NgClass\" class=\"code-anchor\">ngClass</a>) -->\n </
|
||
|
|
}
|