Angular2核心组件@Component

看angular2的项目常常会出现以下的组件

@Component({
  selector: 'text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.css']
})

常用的意思如下:

animations - 规定这个component的动画列表
changeDetection - 通过这个component变更侦测策略;
encapsulation - 通过该component设计封装策略;
entryComponents - 一个components的列表,这个列表会动态插入进当前component的视图中。
exportAs -名下component的实例化被导出在一个模板视图中。
host - class属性映射到host元素上,并绑定了事件,属性;
inputs - 当前class属性名列表,当前components输入的数据绑定。
interpolation - 自定义改写工具,被用于当前component的视图模板上。
moduleld - 文件中ES/CommonJS 模块的id,而当前component就定义在该模块中。
outputs - 当前class属性名列表,对外暴露输出事件,这样其他components就可以调用。
providers - providers列表,该列表可以用于当前component和其子component.
queries - 将配置问题注入到当前component中。
selector - 样式选择器,它可以在一个复杂的视图模板中识别出当前component.
styleUrls - 运用在当前component中的一组样式表的url列表
styles - 样式
template - 视图模板
viewProvider - providers列表,该列表可以用于当前component,以及其子视图。
templateUrl - 视图模板的url链接
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: @ComponentAngular 中的一个装饰器函数,它能够将一个普通的 TypeScript 类变为一个组件。 当 Angular 应用启动时,它会扫描整个应用,查找带有 @Component 装饰器的类。在找到这些类之后,Angular 会将它们注册为组件,并将它们的元数据配置到模板和组件类中。 @Component 装饰器会接受一个元数据对象,该对象中会包含模板、组件类型、以及其他相关信息。例如: ``` @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'my-app'; } ``` 在上面的例子中,@Component 装饰器接受一个元数据对象,该对象中定义了组件的选择器、模板文件、以及样式文件。 最后,当 Angular 需要渲染组件时,它会根据组件的元数据渲染出模板,并将模板中的数据绑定到组件类中对应的属性上。 ### 回答2: Angular是一个基于TypeScript的前端框架,它使用了 @Component 装饰器来定义组件。@Component装饰器是一个函数,它的作用是将类与模板和元数据进行关联,从而定义一个组件。 @Component 装饰器接受一个配置对象作为参数,这个配置对象中可以定义以下几个属性: 1. selector:组件的选择器,它是一个字符串,可以用来在HTML模板中调用组件。 2. templateUrl:组件模板的URL地址,可以在这个模板中定义组件的结构和样式。 3. styleUrls:组件样式文件的URL地址,用来定义组件的样式。 4. inputs:组件的输入属性列表,用来接收来自外部组件的数据。 5. outputs:组件的输出属性列表,用来向外部组件发送数据。 6. providers:组件所依赖的服务的提供者列表。 当使用 @Component 装饰器定义一个组件时,Angular会解析装饰器中的配置对象,并将它们应用到相应的类上。Angular会根据组件的选择器在HTML模板中找到对应的位置,并将组件的结构和样式添加到这个位置上。 同时,Angular还会根据配置对象中的输入属性列表和输出属性列表创建相应的属性,并在组件的构造函数中进行初始化。这样,我们就可以通过组件的输入属性接收外部组件传递过来的数据,通过输出属性向外部组件发送数据。 总的来说,@Component 装饰器的实现原理是通过解析配置对象,并将相关配置应用到组件类中,从而定义一个组件,并将组件的结构和样式添加到对应的HTML模板中。同时,它还负责创建和初始化组件的输入属性和输出属性,以实现组件与外部组件之间的数据交互。 ### 回答3: Angular的@ComponentAngular框架中的核心装饰器之一,用于定义一个组件。它的实现原理如下: 首先,我们需要明确@Component装饰器是一个函数。它接收一个参数对象,这个对象用来描述组件的元数据。元数据包括组件的选择器(selector)、模板(template)或模板URL(templateUrl)、样式(style)或样式URL(styleUrls)、变更检测策略(changeDetection)等信息。 当我们在代码中使用@Component装饰器来定义一个组件时,Angular编译器会解析这个组件的元数据,并根据这些元数据生成一个组件类。编译器会将装饰器参数对象里的属性赋值给这个组件类,这样我们在组件类中就能够通过访问这些属性来获取到元数据的值。 接着,Angular会将组件类实例化,生成一个组件对象。在实例化过程中,Angular会将组件的元数据绑定到这个组件对象上,这样组件对象就能够拥有元数据中定义的各种属性。 然后,Angular会根据组件的元数据中的选择器,在DOM树中找到与选择器匹配的元素,并将组件对象与这个DOM元素进行关联。这样,组件对象就能够控制这个DOM元素,并将自己的内容渲染到这个元素中。 最后,当Angular应用运行时,它会根据组件的变更检测策略来监测组件对象上的属性变化,并通过一系列的变更检测机制来更新DOM树中与组件相关的部分。这样,当组件的数据发生变化时,Angular会自动更新与组件相关的DOM元素,使其显示最新的数据。 综上所述,@Component装饰器通过解析元数据,并将这些元数据应用到对应的组件类和组件对象上,从而实现了组件的定义和渲染。它是Angular框架中非常重要的一部分,为我们构建复杂的Web应用提供了便利。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值