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

p.location-badge.
  exported from <a href="/angular2/annotations">angular2/annotations</a>
  defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L521">angular2/src/core/annotations/annotations.js (line 521)</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 a child <a href="angular2/di/Injector-class"><code>Injector</code></a> which is configured with the `injectables` for the <a href="angular2/annotations/Component-class"><code>Component</code></a>.
  
  All template expressions and statements are then evaluated against the component instance.
  
  For details on the `@View` annotation, see <a href="angular2/annotations/View-class"><code>View</code></a>.
  
  ## Example
  
  ```
  @Component({
    selector: 'greet'
  })
  @View({
    template: 'Hello {{name}}!'
  })
  class Greet {
    name: string;
  
    constructor() {
      this.name = 'World';
    }
  }
  ```
  
.l-main-section
  h2 Members
  .l-sub-section
    h3 constructor

    
    pre.prettyprint
      code.
        constructor({
        selector,
        properties,
        events,
        hostListeners,
        injectables,
        lifecycle,
        changeDetection = DEFAULT
        }:{
          selector:string,
          properties:Object,
          events:List,
          hostListeners:Object,
          injectables:List,
          lifecycle:List,
          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 injectables

    
    :markdown
      Defines the set of injectable objects that are visible to a Component and its children.
      
      The `injectables` defined in the Component annotation allow you to configure a set of bindings for the component's
      injector.
      
      When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
      the Component `injectables` annotation. The injectable objects then become available for injection to the component
      itself and any of the directives in the component's template, i.e. they are not available to the directives which
      are children in the component's light DOM.
      
      
      The syntax for configuring the `injectables` injectable is identical to <a href="angular2/di/Injector-class"><code>Injector</code></a> injectable configuration.
      See <a href="angular2/di/Injector-class"><code>Injector</code></a> for additional detail.
      
      
      ## Simple Example
      
      Here is an example of a class that can be injected:
      
      ```
      class Greeter {
         greet(name:string) {
           return 'Hello ' + name + '!';
         }
      }
      
      @Component({
        selector: 'greet',
        injectables: [
          Greeter
        ]
      })
      @View({
        template: `{{greeter.greet('world')}}!`,
        directives: Child
      })
      class HelloWorld {
        greeter:Greeter;
      
        constructor(greeter:Greeter) {
          this.greeter = greeter;
        }
      }
      ```