@Component 源码解析记录-优快云博客

本文链接：https://blog.youkuaiyun.com/Jie2016Iter/article/details/80692693

本文详细探讨了Angular中的@Component装饰器，涵盖了它所包含的各种元数据属性，如animations、changeDetection、encapsulation等。深入解析了组件的模板、样式、输入输出、提供者、查询选择器等方面，旨在帮助读者理解@Component的工作原理及其在应用中的关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先、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[];