Class Overview
class ComponentMetadata {
constructor
({selector, inputs, outputs, host, exportAs, moduleId, providers, viewProviders, changeDetection = ChangeDetectionStrategy.Default, queries, templateUrl, template, styleUrls, styles, animations, encapsulation, interpolation, entryComponents}?: ComponentMetadataType)
changeDetection
: ChangeDetectionStrategy
viewProviders
: Provider[]
moduleId
: string
templateUrl
: string
template
: string
styleUrls
: string[]
styles
: string[]
animations
: AnimationEntryMetadata[]
encapsulation
: ViewEncapsulation
interpolation
: [string, string]
entryComponents
: Array<Type<any>|any[]>
}
Class Description
Declare reusable UI building blocks for an application.
Each Angular component requires a single @Component
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
providers
andviewProviders
.
All template expressions and statements are then evaluated against the component instance.
Lifecycle hooks
When the component class implements some 生命周期钩子 the callbacks are called by the change detection at defined points in time during the life of the component.
Example
Constructor
Class Details
changeDetection : ChangeDetectionStrategy
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.
viewProviders : Provider[]
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:
moduleId : string
The module id of the module that contains the component.
Needed to be able to resolve relative urls for templates and styles.
In CommonJS, this can always be set to module.id
, similarly SystemJS exposes __moduleName
variable within each module.
Simple Example
templateUrl : string
Specifies a template URL for an Angular component.
NOTE: Only one of templateUrl
or template
can be defined per View.
template : string
Specifies an inline template for an Angular component.
NOTE: Only one of templateUrl
or template
can be defined per View.
styleUrls : string[]
Specifies stylesheet URLs for an Angular component.
styles : string[]
Specifies an inline stylesheet for an Angular component.
animations : AnimationEntryMetadata[]
Animations are defined on components via an animation-like DSL. This DSL approach to describing animations allows for a flexibility that both benefits developers and the framework.
Animations work by listening on state changes that occur on an element within the template. When a state change occurs, Angular can then take advantage and animate the arc in between. This works similar to how CSS transitions work, however, by having a programmatic DSL, animations are not limited to environments that are DOM-specific. (Angular can also perform optimizations behind the scenes to make animations more performant.)
For animations to be available for use, animation state changes are placed within
animation triggers which are housed inside of the animations
annotation
metadata. Within a trigger both state and transition entries
can be placed.
As depicted in the code above, a group of related animation states are all contained within
an animation trigger
(the code example above called the trigger myTriggerName
).
When a trigger is created then it can be bound onto an element within the component's
template via a property prefixed by an @
symbol followed by trigger name and an expression
that
is used to determine the state value for that trigger.
For state changes to be executed, the expression
value must change value from its existing
value
to something that we have set an animation to animate on (in the example above we are listening
to a change of state between on
and off
). The expression
value attached to the trigger
must be something that can be evaluated with the template/component context.
DSL Animation Functions
Please visit each of the animation DSL functions listed below to gain a better understanding of how and why they are used for crafting animations in Angular2:
encapsulation : ViewEncapsulation
Specify how the template and the styles should be encapsulated.
The default is ViewEncapsulation.Emulated
if the view
has styles,
otherwise ViewEncapsulation.None
.
interpolation : [string, string]
entryComponents : Array<Type<any>|any[]>
Defines the components that should be compiled as well when this component is defined. For each components listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.
exported from @angular/core/index, defined in @angular/core/src/metadata/directives.ts