5 lines
16 KiB
JSON
5 lines
16 KiB
JSON
|
{
|
||
|
|
"id": "guide/migration-undecorated-classes",
|
||
|
|
"title": "Missing @Directive()/@Component() decorator migration",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/migration-undecorated-classes.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=\"missing-directivecomponent-decorator-migration\">Missing <code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>()</code>/<code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>()</code> decorator migration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-undecorated-classes#missing-directivecomponent-decorator-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-undecorated-classes#what-does-this-migration-do\"><i class=\"material-icons\">link</i></a></h2>\n<p>This migration adds an empty <code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>()</code> decorator to undecorated\nbase classes that:</p>\n<ul>\n<li>use Angular features</li>\n<li>are extended by directives or components</li>\n</ul>\n<p>For example, in the diff below, a <code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>()</code> decorator is added to <code>BaseMenu</code> because <code>BaseMenu</code> uses dependency injection.</p>\n<p> <strong>Before:</strong></p>\n<code-example language=\"ts\">\nexport class BaseMenu {\n constructor(private vcr: <a href=\"api/core/ViewContainerRef\" class=\"code-anchor\">ViewContainerRef</a>) {}\n}\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({selector: '[settingsMenu]'})\nexport class SettingsMenu extends BaseMenu {}\n</code-example>\n<p> <strong>After:</strong></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>()\nexport class BaseMenu {\n constructor(private vcr: <a href=\"api/core/ViewContainerRef\" class=\"code-anchor\">ViewContainerRef</a>) {}\n}\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({selector: '[settingsMenu]'})\nexport class SettingsMenu extends BaseMenu {}\n</code-example>\n<p>In the event that a directive or component is extended by a class without a decorator, the schematic copies any inherited directive or component metadata to the derived class.</p>\n<p><strong>Before:</strong></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'base-menu',\n template: '<div></div>'\n})\nclass BaseMenu {}\n\nexport class SettingsMenu extends BaseMenu {}\n</code-example>\n<p><strong>After:</strong></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'base-menu',\n template: '<div></div>'\n})\nclass BaseMenu {}\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'base-menu',\n template: '<div></div>'\n})\nexport class SettingsMenu extends BaseMenu {}\n</code-example>\n<p>This schematic also decorates classes that use Angular field decorators, including:</p>\n<ul>\n<li><code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code></li>\n<li><code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code></li>\n<li><code>@<a href=\"api/core/HostBinding\" class=\"code-anchor\">HostBinding</a>()</code></li>\n<li><code>@<a href=\"api/core/HostListener\" class=\"code-anchor\">HostListener</a>()</code></li>\n<li><code>@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>()</code> / <code>@<a href=\"api/core/ViewChildren\" class=\"code-anchor\">ViewChildren</a>()</code></li>\n<li><code>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>()</code> / <code>@<a href=\"api/core/ContentChild
|
||
|
|
}
|