angular-cn/public/docs/js/latest/api/annotations/DynamicComponent-class.jade

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#L689">angular2/src/core/annotations/annotations.js (line 689)</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,
          hostProperties,
          injectables,
          lifecycle
        }:{
          selector:string,
          properties:any,
          events:List,
          hostListeners:any,
          hostProperties:any,
          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>.