5 lines
9.7 KiB
JSON
5 lines
9.7 KiB
JSON
{
|
|
"id": "api/upgrade/static/downgradeComponent",
|
|
"title": "downgradeComponent",
|
|
"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/downgradeComponent\", \"name\": \"downgradeComponent\" } }\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/src/common/src/downgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L16-L219\" 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/src/common/src/downgrade_component.ts#L16-L219\" 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=\"downgradecomponent\">downgradeComponent<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/downgradeComponent#downgradecomponent\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label function\">function</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 function that allows an Angular component to be used from AngularJS.</p>\n\n <p><a href=\"api/upgrade/static/downgradeComponent#description\">See more...</a></p>\n </section>\n \n \n \n\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"> <span class=\"member-name\"><a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a></span>(info: { component: <a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any>; downgradedModule?: string; propagateDigest?: boolean; inputs?: string[]; outputs?: string[]; selectors?: string[]; }): any</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table function-overload-parameters\">\n <tbody>\n \n <tr class=\"function-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>info</code>\n </td>\n <td class=\"param-type\"><code>object</code></td>\n <td class=\"param-description\">\n <p>contains information about the Component that is being downgraded:</p>\n<ul>\n<li><code>component: <a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any></code>: The type of the Component that will be downgraded</li>\n<li><code>downgradedModule?: string</code>: The name of the downgraded module (if any) that the component\n\"belongs to\", as returned by a call to <code><a href=\"api/upgrade/static/downgradeModule\" class=\"code-anchor\">downgradeModule</a>()</code>. It is the module, whose\ncorresponding Angular module will be bootstrapped, when the component needs to be instantiated.\n<br>\n(This option is only necessary when using <code><a href=\"api/upgrade/static/downgradeModule\" class=\"code-anchor\">downgradeModule</a>()</code> to downgrade more than one\nAngular module.)</li>\n<li><code>propagateDigest?: boolean</code>: Whether to perform <a href=\"api/core/ChangeDetectorRef#detectChanges\">change detection</a> on the component on every\n<a href=\"https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest\">$digest</a>. If set to <code>false</code>,\nchange detection will still be performed when any of the component's inputs changes.\n(Default: true)</li>\n</ul>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code>any</code>: a factory function that can be used to register the component in an\nAngularJS module.</p>\n\n \n\n\n \n\n \n</div>\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/downgradeComponent#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 function returns a factory function to be used for registering\nan AngularJS wrapper directive for \"downgrading\" an Angular component.</p>\n\n <p>Further information available in the <a href=\"api/upgrade/static/downgradeComponent#usage-notes\">Usage Notes</a>...</p>\n</section>\n\n\n\n \n<section class=\"usage-notes\">\n <h2 id=\"usage-notes\">Usage notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/downgradeComponent#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <h3 id=\"examples\">Examples<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/downgradeComponent#examples\"><i class=\"material-icons\">link</i></a></h3>\n<p>Let's assume that you have an Angular component called <code>ng2Heroes</code> that needs\nto be made available in AngularJS templates.</p>\n<code-example path=\"upgrade/static/ts/full/module.ts\" region=\"ng2-heroes\">\n// This Angular component will be \"downgraded\" to be used in AngularJS\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng2-heroes',\n // This template uses the upgraded `ng1-hero` component\n // Note that because its element is compiled by Angular we must use camelCased attribute names\n template: `<header><ng-content selector=\"h1\"></ng-content></header>\n <ng-content selector=\".extra\"></ng-content>\n <div *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\">\n <ng1-hero [hero]=\"hero\" (onRemove)=\"removeHero.emit(hero)\"><strong>Super Hero</strong></ng1-hero>\n </div>\n <button (click)=\"addHero.emit()\">Add Hero</button>`,\n})\nexport class Ng2HeroesComponent {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() heroes!: Hero[];\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() addHero = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>();\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() removeHero = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>();\n}\n\n</code-example>\n<p>We must create an AngularJS <a href=\"https://docs.angularjs.org/guide/directive\">directive</a>\nthat will make this Angular component available inside AngularJS templates.\nThe <code><a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>()</code> function returns a factory function that we\ncan use to define the AngularJS directive that wraps the \"downgraded\" component.</p>\n<code-example path=\"upgrade/static/ts/full/module.ts\" region=\"ng2-heroes-wrapper\">\n// This directive will act as the interface to the \"downgraded\" Angular component\nng1AppModule.directive('ng2Heroes', <a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>({component: Ng2HeroesComponent}));\n\n</code-example>\n<p>For more details and examples on downgrading Angular components to AngularJS components please\nvisit the <a href=\"guide/upgrade#using-angular-components-from-angularjs-code\">Upgrade guide</a>.</p>\n\n</section>\n\n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/upgrade/static\n - api/upgrade/static/UpgradeModule\n - api/upgrade/static/downgradeModule\n - api/upgrade/static/testing/createAngularJSTestingModule\n - api/upgrade/static/testing/createAngularTestingModule\n - guide/upgrade\n - guide/upgrade-performance\n-->\n<!-- links from this doc:\n - /api\n - api/common/NgForOf\n - api/core/ChangeDetectorRef#detectChanges\n - api/core/Component\n - api/core/EventEmitter\n - api/core/Input\n - api/core/Output\n - api/core/Type\n - api/upgrade\n - api/upgrade/static\n - api/upgrade/static/downgradeComponent#description\n - api/upgrade/static/downgradeComponent#downgradecomponent\n - api/upgrade/static/downgradeComponent#examples\n - api/upgrade/static/downgradeComponent#usage-notes\n - api/upgrade/static/downgradeModule\n - api?query=upgrade%2Fstatic\n - guide/upgrade#using-angular-components-from-angularjs-code\n - https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest\n - https://docs.angularjs.org/guide/directive\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/common/src/downgrade_component.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L16-L219\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/common/src/downgrade_component.ts#L16-L219\n-->"
|
|
} |