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

p.location-badge.
  exported from <a href='../annotations'>angular2/annotations</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.32/modules/angular2/src/core/annotations_impl/annotations.ts#L782-L904">angular2/src/core/annotations_impl/annotations.ts (line 782)</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 `hostInjector` and `viewInjector`.


  All template expressions and statements are then evaluated against the component instance.
  
  For details on the `@View` annotation, see <a href='View-var.html'><code>View</code></a>.
  
  ## Example
  
  ```
  @Component({
    selector: 'greet'
  })
  @View({
    template: 'Hello {{name}}!'
  })
  class Greet {
    name: string;
  
    constructor() {
      this.name = 'World';
    }
  }
  ```
  
  

.l-main-section
  h2 Annotations
  .l-sub-section
    h3.annotation CONST
    pre.prettyprint
      code.
        @CONST()


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

    
    pre.prettyprint
      code.
        constructor({selector, properties, events, host, exportAs, lifecycle, hostInjector, viewInjector,
                   changeDetection = DEFAULT, compileChildren = true}?: {
        selector?: string,
        properties?: List&lt;string&gt;,
        events?: List&lt;string&gt;,
        host?: StringMap&lt;string, string&gt;,
        lifecycle?: List&lt;LifecycleEvent&gt;,
        hostInjector?: List&lt;any&gt;,
        exportAs?: string,
        compileChildren?: boolean,
        viewInjector?: List&lt;any&gt;,
        changeDetection?: string,
      })
    
    :markdown
      
      




  .l-sub-section
    h3 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 viewInjector

    
    :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',
        viewInjector: [
          Greeter
        ]
      })
      @View({
        template: `<needs-greeter></needs-greeter>`,
        directives: [NeedsGreeter]
      })
      class HelloWorld {
      }
      
      ```