141 lines
3.8 KiB
Plaintext
141 lines
3.8 KiB
Plaintext
|
|
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;
|
|
}
|
|
}
|
|
```
|
|
|
|
|
|
|
|
|