5 lines
35 KiB
JSON
5 lines
35 KiB
JSON
{
|
|
"id": "api/upgrade/static/UpgradeComponent",
|
|
"title": "UpgradeComponent",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/upgrade\", \"name\": \"@angular/upgrade\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/upgrade/static\", \"name\": \"@angular/upgrade/static\" } },\n { \"@type\": \"ListItem\", \"position\": 4, \"item\": { \"@id\": \"https://angular.io/api/upgrade/static/UpgradeComponent\", \"name\": \"UpgradeComponent\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/upgrade\">@angular/upgrade</a> > <a href=\"api/upgrade/static\">@angular/upgrade/static</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L29-L298\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L29-L298\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"upgradecomponent\">UpgradeComponent<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#upgradecomponent\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label directive\">directive</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>A helper class that allows an AngularJS component to be used from Angular.</p>\n\n <p><a href=\"api/upgrade/static/UpgradeComponent#description\">See more...</a></p>\n </section>\n \n \n \n \n\n <h2 id=\"ngmodules\">NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#ngmodules\"><i class=\"material-icons\">link</i></a></h2>\n<ul class=\"ngmodule-list\">\n\n</ul>\n\n\n \n\n\n \n\n\n\n\n\n \n\n\n \n <section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#description\"><i class=\"material-icons\">link</i></a></h2>\n <p><em>Part of the <a href=\"api?query=upgrade%2Fstatic\">upgrade/static</a>\nlibrary for hybrid upgrade apps that support AOT compilation.</em></p>\n<p>This helper class should be used as a base class for creating Angular directives\nthat wrap AngularJS components that need to be \"upgraded\".</p>\n\n <h3 id=\"examples\">Examples<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#examples\"><i class=\"material-icons\">link</i></a></h3>\n<p>Let's assume that you have an AngularJS component called <code>ng1Hero</code> that needs\nto be made available in Angular templates.</p>\n<code-example path=\"upgrade/static/ts/full/module.ts\" region=\"ng1-hero\">\n// This AngularJS component will be \"upgraded\" to be used in Angular\nng1AppModule.component('ng1Hero', {\n bindings: {hero: '<', onRemove: '&'},\n transclude: true,\n template: `<div class=\"title\" ng-transclude></div>\n <h2>{{ $ctrl.hero.name }}</h2>\n <p>{{ $ctrl.hero.description }}</p>\n <button ng-click=\"$ctrl.onRemove()\">Remove</button>`\n});\n\n</code-example>\n<p>We must create a <code><a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a></code> that will make this AngularJS component\navailable inside Angular templates.</p>\n<code-example path=\"upgrade/static/ts/full/module.ts\" region=\"ng1-hero-wrapper\">\n// This Angular directive will act as an interface to the \"upgraded\" AngularJS component\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({selector: 'ng1-hero'})\nexport class Ng1HeroComponentWrapper extends <a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a> {\n // The names of the input and output properties here must match the names of the\n // `<` and `&` bindings in the AngularJS component that is being wrapped\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() hero!: Hero;\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() onRemove!: <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><void>;\n\n constructor(elementRef: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>, injector: <a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a>) {\n // We must pass the name of the directive as used by AngularJS to the super\n super('ng1Hero', elementRef, injector);\n }\n}\n\n</code-example>\n<p>In this example you can see that we must derive from the <code><a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a></code>\nbase class but also provide an <a href=\"api/core/Directive\">`@Directive`</a> decorator. This is\nbecause the AOT compiler requires that this information is statically available at\ncompile time.</p>\n<p>Note that we must do the following:</p>\n<ul>\n<li>specify the directive's selector (<code>ng1-hero</code>)</li>\n<li>specify all inputs and outputs that the AngularJS component expects</li>\n<li>derive from <code><a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a></code></li>\n<li>\n<p>call the base class from the constructor, passing</p>\n<ul>\n<li>the AngularJS name of the component (<code>ng1Hero</code>)</li>\n<li>the <code><a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a></code> and <code><a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a></code> for the component wrapper</li>\n</ul>\n</li>\n</ul>\n\n </section>\n \n\n \n\n \n\n \n\n<section class=\"instance-methods\">\n <h2 id=\"methods\">Methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"ngOnInit\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"ngoninit\">\n ngOnInit()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#ngoninit\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L127-L190\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L127-L190\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n \n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">ngOnInit</span>()</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <p>There are no parameters.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"ngOnChanges\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"ngonchanges\">\n ngOnChanges()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#ngonchanges\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L191-L198\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L191-L198\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n \n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">ngOnChanges</span>(changes: <a href=\"api/core/SimpleChanges\" class=\"code-anchor\">SimpleChanges</a>)</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-1\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>changes</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/core/SimpleChanges\" class=\"code-anchor\">SimpleChanges</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"ngDoCheck\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"ngdocheck\">\n ngDoCheck()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#ngdocheck\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L199-L217\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L199-L217\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n \n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">ngDoCheck</span>()</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-2\">Parameters</h6>\n <p>There are no parameters.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"ngOnDestroy\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"ngondestroy\">\n ngOnDestroy()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/UpgradeComponent#ngondestroy\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L218-L224\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L218-L224\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n \n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">ngOnDestroy</span>()</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-3\">Parameters</h6>\n <p>There are no parameters.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n</section>\n\n \n \n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/core/DoCheck\n - api/core/OnChanges\n - api/core/OnDestroy\n - api/core/OnInit\n - api/upgrade/static\n - api/upgrade/static/UpgradeModule\n - api/upgrade/static/testing/createAngularJSTestingModule\n - api/upgrade/static/testing/createAngularTestingModule\n - guide/upgrade\n-->\n<!-- links from this doc:\n - /api\n - api/core/Directive\n - api/core/ElementRef\n - api/core/EventEmitter\n - api/core/Injector\n - api/core/Input\n - api/core/Output\n - api/core/SimpleChanges\n - api/upgrade\n - api/upgrade/static\n - api/upgrade/static/UpgradeComponent#description\n - api/upgrade/static/UpgradeComponent#examples\n - api/upgrade/static/UpgradeComponent#methods\n - api/upgrade/static/UpgradeComponent#ngdocheck\n - api/upgrade/static/UpgradeComponent#ngmodules\n - api/upgrade/static/UpgradeComponent#ngonchanges\n - api/upgrade/static/UpgradeComponent#ngondestroy\n - api/upgrade/static/UpgradeComponent#ngoninit\n - api/upgrade/static/UpgradeComponent#upgradecomponent\n - api?query=upgrade%2Fstatic\n - https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L127-L190\n - https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L191-L198\n - https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L199-L217\n - https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L218-L224\n - https://github.com/angular/angular/edit/master/packages/upgrade/static/src/upgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L29-L298\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L127-L190\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L191-L198\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L199-L217\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L218-L224\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/static/src/upgrade_component.ts#L29-L298\n-->"
|
|
} |