angular-cn/public/docs/js/latest/api/metadata/ComponentMetadata-class.jade
2015-09-01 13:55:47 -07:00

119 lines
2.9 KiB
Plaintext

p.location-badge.
exported from <a href='../metadata'>angular2/metadata</a>
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.36/modules/angular2/src/core/metadata/directives.ts#L728-L848">angular2/src/core/metadata/directives.ts (line 728)</a>
:markdown
Annotations provide the additional information that Angular requires in order to run your
application. This module
contains <a href='ComponentMetadata-class.html'><code>ComponentMetadata</code></a>, <a href='DirectiveMetadata-class.html'><code>DirectiveMetadata</code></a>, and <a href='ViewMetadata-class.html'><code>ViewMetadata</code></a>
annotations, as well as
the <a href='../di/Host-var.html'><code>Host</code></a> annotation that is used by Angular to resolve dependencies.
.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, bindings, viewBindings,
changeDetection = ChangeDetectionStrategy.Default, compileChildren = true}?: {
selector?: string,
properties?: string[],
events?: string[],
host?: StringMap&lt;string, string&gt;,
lifecycle?: LifecycleEvent[],
bindings?: any[],
exportAs?: string,
compileChildren?: boolean,
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
})
: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 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 {
}
```