5 lines
13 KiB
JSON
5 lines
13 KiB
JSON
|
{
|
||
|
|
"id": "guide/dynamic-component-loader",
|
||
|
|
"title": "Dynamic component loader",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/dynamic-component-loader.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-component-loader\">Dynamic component loader<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dynamic-component-loader#dynamic-component-loader\"><i class=\"material-icons\">link</i></a></h1>\n<p>Component templates are not always fixed. An application may need to load new components at runtime.</p>\n<p>This cookbook shows you how to use <code><a href=\"api/core/ComponentFactoryResolver\" class=\"code-anchor\">ComponentFactoryResolver</a></code> to add components dynamically.</p>\n<p>See the <live-example name=\"dynamic-component-loader\"></live-example>\nof the code in this cookbook.</p>\n<a id=\"dynamic-loading\"></a>\n<h2 id=\"dynamic-component-loading\">Dynamic component loading<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dynamic-component-loader#dynamic-component-loading\"><i class=\"material-icons\">link</i></a></h2>\n<p>The following example shows how to build a dynamic ad banner.</p>\n<p>The hero agency is planning an ad campaign with several different\nads cycling through the banner. New ad components are added\nfrequently by several different teams. This makes it impractical\nto use a template with a static component structure.</p>\n<p>Instead, you need a way to load a new component without a fixed\nreference to the component in the ad banner's template.</p>\n<p>Angular comes with its own API for loading components dynamically.</p>\n<a id=\"directive\"></a>\n<h2 id=\"the-anchor-directive\">The anchor directive<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dynamic-component-loader#the-anchor-directive\"><i class=\"material-icons\">link</i></a></h2>\n<p>Before you can add components you have to define an anchor point\nto tell Angular where to insert components.</p>\n<p>The ad banner uses a helper directive called <code>AdDirective</code> to\nmark valid insertion points in the template.</p>\n<code-example path=\"dynamic-component-loader/src/app/ad.directive.ts\" header=\"src/app/ad.directive.ts\">\nimport { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>, <a href=\"api/core/ViewContainerRef\" class=\"code-anchor\">ViewContainerRef</a> } from '@angular/core';\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({\n selector: '[adHost]',\n})\nexport class AdDirective {\n constructor(public viewContainerRef: <a href=\"api/core/ViewContainerRef\" class=\"code-anchor\">ViewContainerRef</a>) { }\n}\n\n\n\n</code-example>\n<p><code>AdDirective</code> injects <code><a href=\"api/core/ViewContainerRef\" class=\"code-anchor\">ViewContainerRef</a></code> to gain access to the view\ncontainer of the element that will host the dynamically added component.</p>\n<p>In the <code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a></code> decorator, notice the selector name, <code>adHost</code>;\nthat's what you use to apply the directive to the element.\nThe next section shows you how.</p>\n<a id=\"loading-components\"></a>\n<h2 id=\"loading-components\">Loading components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dynamic-component-loader#loading-components\"><i class=\"material-icons\">link</i></a></h2>\n<p>Most of the ad banner implementation is in <code>ad-banner.component.ts</code>.\nTo keep things simple in this example, the HTML is in the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code>\ndecorator's <code>template</code> property as a template string.</p>\n<p>The <code><ng-template></code> element is where you apply the directive you just made.\nTo apply the <code>AdDirective<
|
||
|
|
}
|