角 | 将服务注入装饰器

Question

I am trying to inject a service into a decorator function in which I am creating, this is so I can get the contents that are stored inside of variables.

I currently have a basic decorator setup.

export function canEdit(editName: string, service: Service) {
      return function (constructor: any) {
          console.log(constructor);
      }
}

Where I am using this it is asking me for the second parameter, which obviously needs to be dependency injected.

I have also tried the @Inject(Service) which isn't allowed within functions.

Is there a way that I can do this?

Or is it possible to get the parent classes variables within the decorator?

Answer 1

Decorators are a TypeScript feature that work outside of Angular's dependency injection system.

The only solution that I know of is to create a special service that will expose dependencies to the decorator.

@Injectable()
export class DecoratorService {
     private static service: Service | undefined = undefined;
     public constructor(service: Service) {
         DecoratorService.service = service;
     }
     public static getService(): Service {
         if(!DecoratorService.service) {
             throw new Error('DecoratorService not initialized');
         }
         return DecoratorService.service;
     }
}

You can now access the injected service via the above class.

export function canEdit(editName: string) {
      return function (constructor: any) {
          const service = DecoratorService.getService();
          // ^^^ access dependency here
          console.log(constructor);
      }
}

The above will not work unless something in the Angular application depends upon DecoratorService because Angular creates instances when they are needed. So you can inject it into a module to force it to be initialized.

@NgModule({
    provides: [
        DecoratorService
    ]
})
export class MainModule {
    public constructor(service: DecoratorService) {
                      // ^^^ forces an instance to be created
    }
}

Answer 2

I know I'm late to the party, but, there's another alternative to access a Service in a Decorator.

Expose Angular's Injector in the module where the necessary services are required:

@NgModule({
  declarations: [],
  imports: [],
  providers: [SomeService]
})
export class SharedModule {
  static injector: Injector;

  constructor(injector: Injector) {
    SharedModule.injector = injector;
  }
}

Get the service from inside the Decorator via the Module injector property:

export const MyDecorator = (): any => {

  return (target: object, key: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor => {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]): any {
      // access the service
      const service = SharedModule.injector.get<SomeService>(SomeService);

      // (...)
    };

    return descriptor;
  };
};

Answer 3

Angular Dependancy injection works only within a component class or an angular service which is depending on another service.

The consumer of the dependency which is the angular component, declares what it requires in its constructor, and lets the framework provide them.

for more on dependency injection please refere to the officiel angular documentation:

Dependency Injection in action

https://next.angular.io/guide/dependency-injection-in-action