时间戳

首页 > 解决方案 > 带有接口的Angular 6服务

angular - 带有接口的Angular 6服务

问题描述

我正在使用 Angular ( 6.0.7) 构建一个应用程序，并且我正在尝试使用新创建一个服务：

@Injectable({
  providedIn: 'root'
})

但是如何使用接口键入注入？

问题

我有 2 个服务，Authentication.service和SessionStorage.service。我想将会话存储注入身份验证服务。这可以通过以下方式完成：

constructor(private sessionStorage: SessionStorage) {
}

那里没问题。但是出于面向对象的目的，我希望在interface此服务之上有一个（以便我可以将本地存储服务实现为会话存储服务）。因此，我想用接口输入注入的类是合乎逻辑的，但这不能像Angular 5 和更低版本那样做。

那么如何使用我的界面将注入输入到这个全局服务中呢？

我试过了

Angular 服务类型描述了InjectableProvider，但这与 的兄弟姐妹的任何参数都不匹配InjectableProvider，因此这会产生编译器（和 tslint）错误。

@Injectable({
  providedIn: 'root'
}, {provide: IStorageService, useClass: SessionStorage})

标签： angulartypescriptservicedependency-injectionangular6

解决方案

这可以用 来完成InjectionToken，它是过时的替代品OpaqueToken

export const AuthenticationProvider = new InjectionToken(
  "AuthenticationProvider",
  { providedIn: "root", factory: () => new CognitoAuthenticationProvider() }
);

...

@Injectable()
export class CognitoAuthenticationProvider implements IAuthenticationProvider {

...

@Injectable({
  providedIn: "root"
})
export class AuthenticationService {
  constructor(
    @Inject(AuthenticationProvider)
    private authenticationProvider: IAuthenticationProvider,
    private http: HttpClient
  ) {}

推荐阅读