Angular 角度：在组件内使用通用组件

我正在使用nrwl/nx。我的项目有2个angular应用程序和1个库。在这个库中，有1个组件和2个服务。两个应用程序使用相同的组件，但具有不同的服务

如何使用相同的组件但使用不同的服务

这些服务具有相同的属性键，但功能不同

我正在考虑声明一个通用组件，如StackOverflow上的文章： 我试过这个。代码如下：

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

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“cms登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.scss']
})
导出类BaseLoginComponent实现OnInit{
构造函数（私有登录服务：T）{}
ngOnInit（）：void{
this.loginService.getUser（）；//告诉属性“getUser（）”在“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() { }
}

@可注入({
providedIn:LoginModule
})
导出类登录服务{
private currentUserSubject：行为主体；
公共用户：可观察；
public currentUserValue（）：UserEntity{
//不同代码
返回{id:1，用户名：''}
}
login（）：可观察{
//不同代码
返回（空）；
}
注销（）{}
}

我也在考虑使用依赖注入做一些事情，但我不知道如何实现它。

您可以尝试以下方法

在图书馆

提供代币

export const TOKEN_API=new InjectionToken（'API'）

提供接口

接口IServiceInterface{ }

组件内通过令牌注入服务

在应用程序中，您可以为注入令牌提供专用服务

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

//dedicate service
export class MyServiceImplementation implements IServiceInterface {
}

---

这些不同的服务有什么共同点？你能更详细地描述一下你需要什么吗？@BunyaminCoskuner它们共享相同的属性密钥，但功能不同。一个服务通过GoogleAuth授权用户，另一个向我的后端服务器发送http请求，所以他们都尝试通过不同的调用登录用户。所以它们有一个共同的功能。还有一个问题，你应该把这些服务放在哪里？在图书馆还是在应用程序中？

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

//dedicate service
export class MyServiceImplementation implements IServiceInterface {
}