Angular | 데코레이터에 서비스를 주입

Angular | 데코레이터에 서비스를 주입

저는 제가 만들고 있는 데코레이터 기능에 서비스를 주입하려고 하는데, 이것은 변수 안에 저장된 내용을 얻을 수 있도록 하기 위한 것입니다.

저는 현재 기본적인 데코레이터 설정을 하고 있습니다.

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

제가 이것을 사용하는 곳에서는 두 번째 매개변수를 요구하는데, 이 매개변수는 분명히 의존성을 주입해야 합니다.

저는 또한 그것을 시도했습니다.@Inject(Service)기능 내에서는 허용되지 않습니다.

제가 이것을 할 수 있는 방법이 있나요?

아니면 장식가 내에서 부모 클래스 변수를 가져오는 것이 가능합니까?

데코레이터는 Angular의 종속성 주입 시스템 외부에서 작동하는 TypeScript 기능입니다.

제가 아는 유일한 해결책은 장식가에게 의존성을 노출시킬 특별한 서비스를 만드는 것입니다.

@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;
     }
}

이제 위 클래스를 통해 주입된 서비스에 액세스할 수 있습니다.

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

Angular 응용 프로그램의 무언가가 다음에 의존하지 않는 한 위의 내용은 작동하지 않습니다.DecoratorServiceAngular는 필요할 때 인스턴스를 생성하기 때문입니다.따라서 모듈에 주입하여 강제로 초기화할 수 있습니다.

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

파티에 늦은 건 알지만, 데코레이터의 서비스에 액세스할 수 있는 다른 방법이 있습니다.

필요한 서비스가 필요한 모듈에서 Angular's Injector를 노출합니다.

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

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

모듈 인젝터 속성을 통해 데코레이터 내부에서 서비스를 가져옵니다.

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;
  };
};

각도 종속성 주입은 다른 서비스에 의존하는 구성 요소 클래스 또는 각도 서비스 내에서만 작동합니다.

각 구성 요소인 종속성의 소비자는 생성자에 필요한 것을 선언하고 프레임워크가 이를 제공하도록 합니다.

의존성 주입에 대한 자세한 내용은 사무실 각도 설명서를 참조하십시오.

작동 중인 종속성 주입

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

@Ricky의 답변 개선/업데이트.

Angular 14+에서 작업하기 때문에 공급자 목록에 서비스를 포함할 필요가 없습니다.저는 또한 게으른 로딩 모듈로 인해 많은 문제를 겪었기 때문에 앱 모듈에 인젝터를 직접 추가했습니다. 이제 어디에서나 사용할 수 있습니다.

App.module.ts

export class AppModule {
  static injector: Injector;

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

나의 계산기.

import { AppModule } from './app.module';
import { MyService } from './my.service';

export const MyDecorator = (params: unknown): any => {
  return (component: Function) => {
    const service = AppModule.injector.get<MyService>(
      MyService
    );

    console.log(component, params, service);
  };
}

언급URL : https://stackoverflow.com/questions/52665421/angular-inject-service-into-decorator