151 lines
3.4 KiB
Plaintext
151 lines
3.4 KiB
Plaintext
|
|
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<string>,
|
|
events?: List<string>,
|
|
host?: StringMap<string, string>,
|
|
lifecycle?: List<LifecycleEvent>,
|
|
hostInjector?: List<any>,
|
|
exportAs?: string,
|
|
compileChildren?: boolean,
|
|
viewInjector?: List<any>,
|
|
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 {
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|