angular-docs-cn/public/docs/js/latest/api/core/ComponentMetadata-class.jade

p.location-badge.
  exported from <a href='../core'>angular2/core</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.37/modules/angular2/src/core/metadata/directives.ts#L745-L903">angular2/src/core/metadata/directives.ts (line 745)</a>

:markdown
  Declare reusable UI building blocks for an application.
  
  Each Angular component requires a single `@Component` and at least one `@View` annotation. The
  `@Component`
  annotation specifies when a component is instantiated, and which properties and hostListeners it
  binds to.
  
  When a component is instantiated, Angular
  - creates a shadow DOM for the component.
  - loads the selected template into the shadow DOM.
  - creates all the injectable objects configured with `bindings` and `viewBindings`.
  
  All template expressions and statements are then evaluated against the component instance.
  
  For details on the `@View` annotation, see <a href='ViewMetadata-class.html'><code>ViewMetadata</code></a>.
  
  ## Lifecycle hooks
  
  When the component class implements some <a href='../lifecycle_hooks'><code>undefined</code></a> the callbacks are
  called by the change detection at defined points in time during the life of the component.
  
  ## Example
  
  ```
  @Component({
    selector: 'greet'
  })
  @View({
    template: 'Hello {{name}}!'
  })
  class Greet {
    name: string;
  
    constructor() {
      this.name = 'World';
    }
  }
  ```
  
  

.l-main-section
  h2 Annotations
.l-main-section
  h2 Members
  .l-sub-section
    h3#constructor constructor

    
    pre.prettyprint
      code.
        constructor({selector, properties, events, host, dynamicLoadable, compiledHostTemplate, exportAs,
                       moduleId, bindings, viewBindings, changeDetection = ChangeDetectionStrategy.Default,
                       compileChildren = true}?: {
            selector?: string,
            properties?: string[],
            events?: string[],
            host?: StringMap&lt;string, string&gt;,
            dynamicLoadable?: boolean,
            compiledHostTemplate?: any,
            bindings?: any[],
            exportAs?: string,
            moduleId?: string,
            compileChildren?: boolean,
            viewBindings?: any[],
            changeDetection?: ChangeDetectionStrategy,
          })
    
    :markdown




  .l-sub-section
    h3#dynamicLoadable dynamicLoadable

    
    :markdown
      Declare that this component can be programatically loaded.
      Every component that is used in bootstrap, routing, ... has to be
      annotated with this.
      
      
      
      ```
      @Component({
        selector: 'root',
        dynamicLoadable: true
      })
      @View({
        template: 'hello world!'
      })
      class RootComponent {
      }
      ```
      
      





  .l-sub-section
    h3#compiledHostTemplate compiledHostTemplate

    
    :markdown
      Used by build tools to store the compiled template.
      Not intended to be used by a user.
      
      





  .l-sub-section
    h3#changeDetection changeDetection

    
    :markdown
      Defines the used change detection strategy.
      
      When a component is instantiated, Angular creates a change detector, which is responsible for
      propagating the component's bindings.
      
      The `changeDetection` property defines, whether the change detection will be checked every time
      or only when the component tells it to do so.
      
      





  .l-sub-section
    h3#viewBindings viewBindings

    
    :markdown
      Defines the set of injectable objects that are visible to its view DOM children.
      
      ## Simple Example
      
      Here is an example of a class that can be injected:
      
      ```
      class Greeter {
         greet(name:string) {
           return 'Hello ' + name + '!';
         }
      }
      
      @Directive({
        selector: 'needs-greeter'
      })
      class NeedsGreeter {
        greeter:Greeter;
      
        constructor(greeter:Greeter) {
          this.greeter = greeter;
        }
      }
      
      @Component({
        selector: 'greet',
        viewBindings: [
          Greeter
        ]
      })
      @View({
        template: `<needs-greeter></needs-greeter>`,
        directives: [NeedsGreeter]
      })
      class HelloWorld {
      }
      
      ```