Angular(二) - 组件Component

标签：blog   att   title   ppc   处理   bind   动画   chm   文件的   

• 1. 组件Component示例
• 2. Component常用的几个选项
• 3. Component全部的选项
  • 3.1 继承自@Directive装饰器的选项
  • 3.2 @Component自己特有的选项
• 4. 自定义component

1. 组件Component示例

组件是由一个装饰器@Component来声明的，继承自@Directive

import {Component} from ‘@angular/core‘;

@Component({
  selector: ‘app-root233‘, // 这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化
  templateUrl: ‘./app.component.html‘, // 指定html模板
  styleUrls: [‘./app.component.css‘] // 指定css
})
export class AppComponent {
  title = ‘angularapp-2‘; // 这里定义的title和enn可以在html中{{ title }}使用
  enn = true
}

2. Component常用的几个选项

@Component最常用的几个选项是:

• selector：这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化。
• template：组件的内联模板，为组件展示的内容，一般内容比较少时使用。如果提供了它，就不要再用 templateUrl 提供模板了
• templateUrl：组件模板文件的 URL。如果提供了它，就不要再用 template 来提供内联模板了。
• providers ：使用一个 令牌 配置该指令或组件的 注入器，该令牌会映射到一个依赖项的提供商
• exportAs ：一个或多个名字，可以用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们

3. Component全部的选项

3.1 继承自@Directive装饰器的选项

选项	类型	说明
selector	string	css选择器名，用于在模板中标记出该指令（组件），并触发其实例化
inputs	string[]	Angular 会在变更检测期间自动更新输入属性。 inputs 属性定义了一组从 directiveProperty 指向 bindingProperty 的配置项： · directiveProperty 用于指定要写入值的指令内属性。 · bindingProperty 用于指定要从中读取值的 DOM 属性。 当没有提供 bindingProperty 时，就假设它和 directiveProperty 一样。 例如：
outputs	string[]	一组可供事件绑定的输出属性。当输出属性发出事件时，就会调用模板中一个附加到该事件的处理器。 每个输出属性都会把 directiveProperty 映射到 bindingProperty： · directiveProperty 指定要发出事件的组件属性。 · bindingProperty 指定要附加事件处理器的 HTML 属性。
provides	Provider[]	服务提供商的集合
exportAs	string	一个或多个名字，可以用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们。
queries	[{key:string]:any}	配置将要注入到该指令中的一些查询。 内容查询会在调用 ngAfterContentInit 回调之前设置好。 试图查询会在调用 ngAfterViewInit 回调之前设置好。
jit	true	如果为 true，则该指令/组件将会被 AOT 编译器忽略，因此永远只会被 JIT 编译。 这个选项是为了支持未来的 Ivy 编译器，目前还没有效果。
host	[{key:string]:string}	使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。 Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。 当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。 当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。 对于事件处理： · 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。 · 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。

3.2 @Component自己特有的选项

4. 自定义component

angular提供了命令行可以生成组件，不用手动创建，下面是一个例子

# 在app/component文件夹下生成一个叫custom的组件
ng g component component/custom

生成出来的结果

Angular(二) - 组件Component

标签：blog   att   title   ppc   处理   bind   动画   chm   文件的   

原文地址：https://www.cnblogs.com/baoshu/p/13624476.html