91 lines
2.1 KiB
Plaintext
91 lines
2.1 KiB
Plaintext
|
|
p.location-badge.
|
|
exported from <a href="/angular2/annotations.html">angular2/annotations</a>
|
|
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L660">angular2/src/core/annotations/annotations.js (line 660)</a>
|
|
|
|
:markdown
|
|
Directive used for dynamically loading components.
|
|
|
|
Regular Angular components are statically resolved. DynamicComponent allows to you resolve a component at runtime
|
|
instead by providing a placeholder into which a regular Angular component can be dynamically loaded. Once loaded,
|
|
the dynamically-loaded component becomes permanent and cannot be changed.
|
|
|
|
|
|
## Example
|
|
|
|
Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic component
|
|
`DynamicComp` requests loading of the `HelloCmp` component.
|
|
|
|
There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be used in other static
|
|
locations.
|
|
|
|
```
|
|
@DynamicComponent({
|
|
selector: 'dynamic-comp'
|
|
})
|
|
class DynamicComp {
|
|
helloCmp:HelloCmp;
|
|
constructor(loader:DynamicComponentLoader, location:PrivateComponentLocation) {
|
|
loader.load(HelloCmp, location).then((helloCmp) => {
|
|
this.helloCmp = helloCmp;
|
|
});
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
selector: 'hello-cmp'
|
|
})
|
|
@View({
|
|
template: "{{greeting}}"
|
|
})
|
|
class HelloCmp {
|
|
greeting:string;
|
|
constructor() {
|
|
this.greeting = "hello";
|
|
}
|
|
}
|
|
```
|
|
|
|
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3 constructor
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor({
|
|
selector,
|
|
properties,
|
|
events,
|
|
hostListeners,
|
|
injectables,
|
|
lifecycle
|
|
}:{
|
|
selector:string,
|
|
properties:Object,
|
|
events:List,
|
|
hostListeners:Object,
|
|
injectables:List,
|
|
lifecycle:List
|
|
}={})
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 injectables
|
|
|
|
|
|
:markdown
|
|
Same as `injectables` in the <a href="Component-class.html"><code>Component</code></a>.
|
|
|
|
|
|
|
|
|