Angular: использование универсального c компонента внутри компонента

Question

Я использую nrwl / nx. В моем проекте 2 angular приложений и 1 библиотека. Внутри этой библиотеки есть 1 компонент и 2 сервиса. Оба приложения используют один и тот же компонент, но с другим сервисом.

Как я могу использовать один и тот же компонент, но с другим сервисом?

Сервисы имеют те же ключи свойств, но не одинаковые функциональные возможности.

Я думал о том, чтобы объявить универсальный c компонент, такой как этот пост, в StackOverflow: Объявить компонент с generi c type Я пробовал это. Вот код:

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'cms-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
})
export class BaseLoginComponent<T> implements OnInit {
   constructor(private loginService: T) { }

   ngOnInit(): void {
      this.loginService.getUser(); // tells property 'getUser()' does not exist in 'T'
   }
}

Вот код из моих служб

@Injectable({
  providedIn: LoginModule
})
export class LoginService {
  private currentUserSubject: BehaviorSubject<UserEntity>;
  public currentUser: Observable<UserEntity>;

  public currentUserValue(): UserEntity {
    // different code
    return { id: 1, username: '' }
  }

  login(): Observable<any> {
    // different code
    return of(null);
  }

  logout() { }
}

Я также думал о том, чтобы что-то сделать с помощью инъекций зависимости, но я не знаю, как реализовать это.

Answer 1

Вы можете попробовать следующим образом

В библиотеке

1. предоставить токен

   export const TOKEN_API = new InjectionToken ('api');

2. предоставляет интерфейс

   интерфейс IServiceInterface {}

3. в сервисе ввода компонентов по токену

@Component({})
export class MyComponent {
  constructor(@Inject(TOKEN_API) private api: IServiceInterface) {
  }
}

В приложении вы можете предоставить специальный сервис для токена инъекции

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    { provide: TOKEN_API, useClass: MyServiceImplementation}
  ],
  bootstrap: [AppComponent]
})

//dedicate service
export class MyServiceImplementation implements IServiceInterface {
}