angular :host_angular的Component

它是一个装饰器，用于把某个类标记为Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。

@Component最常使用的几个选项。

selector

这个是css选择器用于在模板中标记出该指令，并触发该指令的实例化。

template

组件的内置模板，为组件展示的内容，一般内容比较少的时候使用，如果使用了他，就不要用templateUrl提供模板了。

templateUrl

组件模板文件的url。如果提供了他，就不要用template来提供内联模板了。

providers

使用一个令牌配置该指令或组件的注入器，该指令会映射到一个依赖项的提供商。

继承自Directive装饰器的选项

1.selector

说明

css选择器名，用于在模板中标记该指令和组件，并触发使其实例化。

2.inputs

说明

angular会在变更检测期间自动更新输入属性。

inputs 属性定义了一组从 directiveProperty 指向 bindingProperty 的配置项：

·directiveProperty 用于指定要写入值的指令内属性。

·bindingProperty 用于指定要从中读取值的 DOM 属性。

当没有提供 bindingProperty 时，就假设它和 directiveProperty 一样。

3.outputs

说明

一组可供事件绑定的输出属性。当输出属性发出事件时，就会调用模板中一个附加事件的处理器。

每个输出属性都会把 directiveProperty 映射到 bindingProperty：

·directiveProperty 指定要发出事件的组件属性。

·bindingProperty 指定要附加事件处理器的 HTML 属性。

4.provides

说明

服务提供商的集合

5.exportAs

说明

一个或多个名字，可以用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们。

6.queries

类型

{[key:string]:any}

说明

配置将要注入到该指令中的一些查询。

内容查询会在调用 ngAfterContentInit 回调之前设置好。 试图查询会在调用 ngAfterViewInit 回调之前设置好。

7.jit

说明

如果为 true，则该指令/组件将会被 AOT 编译器忽略，因此永远只会被 JIT 编译。

这个选项是为了支持未来的 Ivy 编译器，目前还没有效果。

8.host

说明

使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。对于事件处理：· 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。· 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。

使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。对于事件处理：· 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。· 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。

使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。对于事件处理：· 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。· 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。

使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。对于事件处理：· 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。· 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。

使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。对于事件处理：· 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。· 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。

<table data-draft-node="block" data-draft-type="table" data-size="normal" data-row-style="normal">

<table data-draft-node="block" data-draft-type="table" data-size="normal" data-row-style="normal">

自己特有的选项

1.changeDetection

说明

当组件实例化之后，Angular 就会创建一个变更检测器，它负责传播组件各个绑定值的变化。 该策略是下列值之一：

·ChangeDetectionStrategy#OnPush(0) 把策略设置为 CheckOnce（按需）。

·ChangeDetectionStrategy#Default(1) 把策略设置为 CheckAlways。

2.viewProviders

说明

定义一组可注入对象，它们在视图的各个子节点中可用

3.moduleId

说明

包含该组件的那个模块的 ID。该组件必须能解析模板和样式表中使用的相对 URL。 SystemJS 在每个模块中都导出了 __moduleName 变量。在 CommonJS 中，它可以设置为module.id。

4.templateUrl

说明

组件模板文件的 URL。如果提供了它，就不要再用 template 来提供内联模板了。

5.template

说明

组件的内联模板。如果提供了它，就不要再用 templateUrl 提供模板了。

6.styleUrls

说明

一个或多个 URL，指向包含本组件 CSS 样式表的文件。

7.styles

说明

本组件用到的一个或多个内联 CSS 样式。

8.animations

说明

一个或多个动画 trigger() 调用，包含一些 state() 和 transition() 定义。

9.encapsulation

说明

供模板和 CSS 样式使用的样式封装策略。取值为：

·ViewEncapsulation.Native：使用 Shadow DOM。它只在原生支持 Shadow DOM 的平台上才能工作。

·ViewEncapsulation.Emulated：使用垫片（shimmed) CSS 来模拟原生行为。

·ViewEncapsulation.None：使用全局 CSS，不做任何封装。

如果没有提供，该值就会从 CompilerOptions 中获取它。默认的编译器选项是 ViewEncapsulation.Emulated。

如果该策略设置为 ViewEncapsulation.Emulated，并且该组件没有指定 styles 或 styleUrls，就会自动切换到 ViewEncapsulation.None。

10.interpolation

说明

改写默认的插值表达式起止分界符（{{ 和 }}）

11.entryComponents

说明

一个组件的集合，它应该和当前组件一起编译。对于这里列出的每个组件，Angular 都会创建一个ComponentFactory并保存进ComponentFactoryResolver中。

12.preserveWhitespaces

说明

为 true 则保留，为 false 则从编译后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正则表达式中匹配 s 的字符。默认为 false，除非通过编译器选项改写了它。