Angular2核心组件@Component

╰半橙微兮° 2024-02-18 16:08 16阅读 0赞

功能：  
利用Angular的component创建一个class,并且在这个component中集中配置元数据（metadata）;

如何使用？

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
          
      title = 'app works!';
    }
       
       
        
         1 
         2 
         3 
         4 
         5 
         6 
         7 
         8 
         9 
         10

概述  
Component修饰符可以让开发者通过Angular 的Component创建一个类似Java的class，并同时提供额外的元数据用于定义在运行环境中，这个component将如何运行/实例化以及被使用。

在Angular2应用中组件是UI最基础的建筑砖块，一个Angular2应用就是一个Angular Components Tree。Angular components它实际上是directives下的一个子集，但是和directive不同的是，Component始终存在一个视图模板，在这个视图模板中，每一个元素只能有一个component被实例化。

任何一个Component都是NgModule的一部分，这样它就可以被其他应用和其他Component所调用。为了定义Component是`NgModule`的一个成员之一，开发者应该在`NgModule`的`declarations`属性中，将自己开发的Component列出。

另外，通过Component修饰符（也就是@Component）开发者可以配置元数据，这样通过各式各样的Life-Cycle hooks，Components就可以控制他们的运行环境。

元数据属性：

1.  animations \- 规定这个component的动画列表
2.  changeDetection \- 通过这个component变更侦测策略；
3.  encapsulation \- 通过该component设计封装策略；
4.  entryComponents \- 一个components的列表，这个列表会动态插入进当前component的视图中。
5.  exportAs \-名下component的实例化被导出在一个模板视图中。
6.  host \- class属性映射到host元素上，并绑定了事件，属性；
7.  inputs \- 当前class属性名列表，当前components输入的数据绑定。
8.  interpolation \- 自定义改写工具，被用于当前component的视图模板上。
9.  moduleld \- 文件中ES/CommonJS 模块的id,而当前component就定义在该模块中。
10. outputs \- 当前class属性名列表，对外暴露输出事件，这样其他components就可以调用。
11. providers \- providers列表，该列表可以用于当前component和其子component.
12. queries \- 将配置问题注入到当前component中。
13. selector \- 样式选择器，它可以在一个复杂的视图模板中识别出当前component.
14. styleUrls \- 运用在当前component中的一组样式表的url列表
15. styles \- 样式
16. template \- 视图模板
17. viewProvider \- providers列表，该列表可以用于当前component，以及其子视图。
18. templateUrl \- 视图模板的url链接