How to provide a service that uses generics in Angular4?

I notice that my project has many resolver , which, despite the fact that, working with different entities and repositories to place the same code. So I took a call to shorten them to a single resolver service using generics:

@Injectable()
export class DetailResolver<T, R extends Repository<T>> implements Resolve<T> {

  constructor(private repositoryService: R, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> {
    // use repositoryService to resolve this route
  }
}

You can specify entity type T and repository type R. However, I cannot use this service:

const appRoutes: Routes = [
  // other routes
  {
    path: ':id',
    component: MessageEditComponent,
    resolve: {
      message: DetailResolver<Message, MessageService>
    }
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(appRoutes)
  ],
  exports: [
    RouterModule
  ],
  providers: [
    DetailResolver<Message, MessageService>
  ]
})

As soon as I specify the generic type in DetailResolver<Message, MessageService>, the compiler wants me to instantiate:

A value of type typeof DetailResolver cannot be called. Did you mean to include a new one?

I am not very familiar with DI corner insides. Can someone describe what happened, is there a solution to this problem? I am using angular 4.3.

+4
1

, DI - , - -, , .

, , , , . , , JavaScript , , Angular . TypeScript .

abstract classes. : 1) , , Javascript. 2) DI , , .

- :

@Injectable()
export abstract class DetailResolver<T, R extends Repository<T>> implements Resolve<T> {...}

@Injectable()
export class MessageResolver extends DetailResolver<Message, MessageService> {...}

NgModule :

providers: [{ provide: DetailResolver, useClass: MessageResolver }]

InjectionToken

InjectionToken ( OpaqueToken Angular 4.0). InjectionToken - , DI; , , OpaqueToken, , .

const MESSAGE_RESOLVER = new InjectionToken<DetailResolver<Message, MessageService>>('MESSAGE_RESOLVER');

, InjectionToken, . NgModule.

providers: [{ provide: MESSAGE_RESOLVER, useClass: MessageResolver }]

, useClass ; , useValue useFactory, .

, !

+4

Source: https://habr.com/ru/post/1687359/


All Articles