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

Posted 2023-03-13

【中文标题】Angular：在组件内使用通用组件

【英文标题】：Angular: Using generic component inside a component

【发布时间】：2020-08-14 04:29:27

【问题描述】：

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

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

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

我正在考虑在 *** 上声明一个像这篇文章这样的通用组件：Declare a component with generic 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()  

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

【问题讨论】：

这些不同的服务有什么共同点？

你能更详细地描述你需要什么吗？

@BunyaminCoskuner 它们共享相同的属性键，但它们没有相同的功能。一项服务通过 google auth 授权用户，另一项向我的后端服务器发送 http 请求

好的，所以他们都尝试通过不同的调用登录用户。所以它们有一个共同的功能。还有一个问题，你应该把这些服务放在哪里？在库或应用程序中？

【参考方案1】：

你可以尝试如下

在图书馆

提供令牌

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

提供接口

接口 IServiceInterface

在组件中通过令牌注入服务

@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