Angular组件外自定义装饰器未生效问题求助

这种通过装饰器注册类到工厂列表的场景完全可行，是实现工厂模式的常见方案。你的装饰器未执行、tools对象为空的核心原因是被装饰的类（如TestTool）未被打包工具纳入构建，装饰器代码从未运行。

问题根源 #

Angular使用的Webpack等打包工具会开启Tree-Shaking优化，自动剔除未被引用的模块代码。如果你的TestTool类只是定义了但从未在任何活跃模块中被导入/引用，它会被当作“死代码”剔除，装饰器自然不会执行。

具体解决方案 #

1. 确保被装饰类被导入触发执行 #

首先修改TestTool的定义，导出类：

// test-tool.ts
import { Tool } from './tool.abstract';
import { RegisterTool } from './tools.decorator';

@RegisterTool()
export class TestTool extends Tool {
  override name = 'test_tool'; // 修正：与抽象类的name属性保持一致
  constructor() {
    super('test_tool', 'path/to/icon'); // 实现抽象类的构造函数
  }

  override aMethod() {
    // 实现方法逻辑
  }
}

然后在某个会被Angular初始化的模块中导入这个类（不需要显式使用，仅导入即可触发装饰器执行），比如在app.module.ts中：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// 导入工具类，触发装饰器注册
import './test-tool';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 优化装饰器与类型定义 #

原装饰器的tools类型可以简化，直接存储类的构造函数即可，无需额外包装：

// tools.decorator.ts
import { Tool } from './tool.abstract';

// 简化类型：直接存储可实例化的Tool子类构造函数
export const tools: {
  [key: string]: new (...args: any[]) => Tool
} = {};

export function RegisterTool(): ClassDecorator {
  return function (cls: new (...args: any[]) => Tool) {
    console.log('已注册工具类:', cls.name);
    // 直接存入构造函数，后续工厂可直接new
    tools[cls.name] = cls;
    return cls;
  };
}

3. 修正抽象类与派生类的属性一致性 #

原代码中抽象类定义了abstract name: string，但TestTool中用了toolName，这会导致类型错误，需统一为name，并确保构造函数调用父类的构造方法。

验证效果 #

在组件中导入tools并打印：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { tools } from './tools.decorator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    console.log('已注册的工具列表:', tools);
    // 此时应该能看到TestTool的注册信息
    // 工厂创建示例：
    const testTool = new tools['TestTool']();
    console.log(testTool.name); // 输出test_tool
  }
}

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