Componentlink
Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.
一个装饰器,用于把某个类标记为 Angular 组件,并为它配置一些元数据,以决定该组件在运行期间该如何处理、实例化和使用。
选项 | 说明 |
---|---|
changeDetection | The change-detection strategy to use for this component. 用于当前组件的变更检测策略。 |
viewProviders | Defines the set of injectable objects that are visible to its view DOM children. See example. 定义一组可注入对象,它们在视图的各个子节点中可用。参见例子。 |
moduleId | The module ID of the module that contains the component. The component must be able to resolve relative URLs for templates and styles. SystemJS exposes the 包含该组件的那个模块的 ID。该组件必须能解析模板和样式表中使用的相对 URL。 SystemJS 在每个模块中都导出了 |
templateUrl | The URL of a template file for an Angular component. If provided, do not supply an inline template using 组件模板文件的 URL。如果提供了它,就不要再用 |
template | An inline template for an Angular component. If provided, do not supply a template file using 组件的内联模板。如果提供了它,就不要再用 |
styleUrls | One or more URLs for files containing CSS stylesheets to use in this component. 一个或多个 URL,指向包含本组件 CSS 样式表的文件。 |
styles | One or more inline CSS stylesheets to use in this component. 本组件用到的一个或多个内联 CSS 样式。 |
animations | One or more animation 一个或多个动画 |
encapsulation | An encapsulation policy for the template and CSS styles. One of: 供模板和 CSS 样式使用的样式封装策略。取值为: |
interpolation | Overrides the default encapsulation start and end delimiters ( 改写默认的插值表达式起止分界符( |
entryComponents | A set of components that should be compiled along with this component. For each component listed here, Angular creates a 一个组件的集合,它应该和当前组件一起编译。对于这里列出的每个组件,Angular 都会创建一个 |
preserveWhitespaces | True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the 为 |
继承自 Directive 装饰器
选项 | 说明 |
---|---|
selector | The CSS selector that identifies this directive in a template and triggers instantiation of the directive. 这个 CSS 选择器用于在模板中标记出该指令,并触发该指令的实例化。 |
inputs | Enumerates the set of data-bound input properties for a directive 列举某个指令的一组可供数据绑定的输入属性 |
outputs | The set of event-bound output properties. When an output property emits an event, an event handler attached to that event in the template is invoked. 一组可供事件绑定的输出属性。当输出属性发出事件时,就会调用模板中一个附加到该事件的处理器。 |
providers | Configures the injector of this directive or component with a token that maps to a provider of a dependency. |
exportAs | The name or names that can be used in the template to assign this directive to a variable. For multiple names, use a comma-separated string. 一个或多个名字,可以用来在模板中把该指令赋值给一个变量。当有多个名字时,请使用逗号分隔它们。 |
queries | Configures the queries that will be injected into the directive. 配置将要注入到该指令中的一些查询。 |
jit | If true, this directive/component will be skipped by the AOT compiler and so will always be compiled using JIT. 如果为 |
host | Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs. 使用一组键-值对,把类的属性映射到宿主元素的绑定(Property、Attribute 和事件)。 |
说明
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
组件是 Angular 应用中最基本的 UI 构造块。Angular 应用中包含一棵组件树。
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
Angular 的组件是指令的一个子集,它总是有一个与之关联的模板。
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations
field of the @NgModule
metadata.
组件必须从属于某个 NgModule 才能被其它组件或应用使用。 要想让它成为某个 NgModule 中的一员,请把它列在 @NgModule
元数据的 declarations
字段中。
Note that, in addition to these options for configuring a directive, you can control a component's runtime behavior by implementing life-cycle hooks. For more information, see the Lifecycle Hooks guide.
注意,除了这些用来对指令进行配置的选项之外,你还可以通过实现生命周期钩子来控制组件的运行期行为。 要了解更多,参见 生命周期钩子 章。
使用说明
Setting component inputs
设置组件的输入属性
The following example creates a component with two data-bound properties, specified by the inputs
value.
下免得例子创建了一个带有两个数据绑定属性的组件,它是通过 inputs
值来指定的。
Setting component outputs
设置组件的输出属性
The following example shows two event emitters that emit on an interval. One emits an output every second, while the other emits every five seconds.
下面的例子展示了两个事件发生器,它们定时发出事件。一个每隔一秒发出一个输出事件,另一个则隔五秒。
Injecting a class with a view provider
使用视图提供商注入一个类
The following simple example injects a class into a component using the view provider specified in component metadata:
下面的例子示范了如何在组件元数据中使用视图提供商来把一个类注入到组件中: