Angular 15自定义类装饰器无输出，需实现实例化触发

1. 为什么类装饰器只执行一次？ #

TypeScript类装饰器的默认执行时机是类定义阶段（即代码加载时），而非类实例化阶段。如果你的装饰器只是在类定义时打印日志，自然只会输出一次。

2. 如何让装饰器在每次实例化时触发？ #

需要在装饰器中包装原类的构造函数，在实例化时执行日志逻辑：

// 实现实例化触发的装饰器
function LogClass<T extends { new (...args: any[]): {} }>(constructor: T) {
  return class extends constructor {
    constructor(...args: any[]) {
      super(...args); // 保留原组件构造逻辑
      console.log(`[Log] ${constructor.name} 已实例化，参数：`, args);
    }
  };
}

3. 为什么控制台没输出？ #

排查以下几点：

• 组件未实例化：确认<app-my-card>已在模板中使用，或该组件已配置在路由中。
• 装饰器顺序错误：Angular组件装饰器@Component必须放在@LogClass下方（装饰器从右到左执行，需先让Angular处理组件，再用你的装饰器包装）：

  @Component({
    selector: 'app-my-card',
    templateUrl: './my-card.component.html'
  })
  @LogClass
  export class MyCardComponent {}
  

• 生产模式优化：生产构建时Angular可能会移除无副作用的装饰器日志。先在ng serve开发环境测试；若需生产环境保留，可在angular.json的build配置中临时禁用optimization：

  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "optimization": false
          }
        }
      }
    }
  }
  

补充扩展 #

如果需要监听组件生命周期钩子（如初始化、销毁），可在装饰器中包装对应方法：

function LogClass<T extends { new (...args: any[]): {} }>(constructor: T) {
  return class extends constructor {
    constructor(...args: any[]) {
      super(...args);
      console.log(`[Log] ${constructor.name} 已实例化`);
      
      // 包装ngOnInit钩子
      const originalOnInit = this.ngOnInit;
      this.ngOnInit = () => {
        console.log(`[Log] ${constructor.name} ngOnInit 触发`);
        originalOnInit?.call(this);
      };
    }
  };
}

内容的提问来源于stack exchange，提问作者LeO