@Component 源码解析记录

首先、Component接口继承自Directive接口

export interface Component extends Directive {

    //定义使用的变更检测策略,当一个组件实例化后,angular会创建一个变化检测器,来实时负责传播组件的绑定
    //OnPush:触发检测一次,Default:实时检测)
    changeDetection?: ChangeDetectionStrategy;
    //定义其视图DOM子项可见的可注入对象集合
    //作用是隔离依赖注入
    viewProviders?: Provider[];
    //包含组件的模块ID
    moduleId?: string;
    //视图HTML相对路劲
    templateUrl?: string;
    //视图code,h5代码块
    template?: string;
    //样式scss文件相对路劲
    styleUrls?: string[];
    //样式css code
    styles?: string[];
    //动画,官方例子:
     *  animations: [
* //设置触发器
* trigger('myTriggerName', [
* // state是动画开关状态
* // style是对应状态下的样式(透明度)变化
* // 动画开始时候
* state('on', style({ opacity: 1 }),
* //动画结束
     *       state('off', style({ opacity: 0 }),
*
* // 动画状态开始到完成的操作,耗时1秒
* // this state change jump is true
* transition('on => off', [
* animate("1s")
* ])
* ])
* ]
    animations?: any[];
    /**
* 制定如何封装模板和样式(影子DOM:可以防止内部的代码被外部样式封装影响
* - {@link ViewEncapsulation#Native `ViewEncapsulation.Native`} 使用影子DOM,如果平台可用
* - {@link ViewEncapsulation#Emulated `ViewEncapsulation.Emulated`} 无 Shadow DOM,但是通过 Angular
     * 提供的样式包装机制来封装组件,使得组件的样式不受外部影响。这是 Angular 的默认设置。
* - {@link ViewEncapsulation#None `ViewEncapsulation.None`} 无任何样式封装
*
* 如果是默认的 Emulated 样式包装,且没有规定style(Urls)时,会自动变成 None 状态
*/

    encapsulation?: ViewEncapsulation;

    //selector就是template的容器,样式选择器,它可以在一个复杂的视图模板中识别出当前component
    selector?: string;
    //当前class属性名列表,当前components输入的数据绑定。
    inputs?: string[];
    //当前components与子DOM可用的注入对象集合
    providers?: Provider[];

}

元数据属性:

  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链接
参考自:@Component元数据解释




阅读更多

没有更多推荐了,返回首页