在 main.ts 中注入带有构造函数的服务

Question

在我的 Angular 项目中，我使用 AWS Amplify 来处理我的身份验证。现在，我想将其配置为使用 cookie 管理令牌。

阅读文档后我发现我需要在 main.ts.

所以我安装了 ngx-cookie 并开始在库方法和 AWS Amplify 签名之间进行映射，如下所示：

main.ts

class MyStorage {

  constructor(private cookieService: CookieService) { }

  setItem(key: string, value: string) {
    this.cookieService.put(key, value);
  }

  getItem(key: string): string {
    return this.cookieService.get(key);
  }

}

Amplify.configure({
  ...amplify,
  Auth: {
    oauth: oauth,
    cookieStorage: {
      domain: 'localhost'
    },
    storage: new MyStorage(), <--- expect a cookieService here
  }
});

问题：new MyStorage() 期望参数中有 cookieService，似乎无法在 main.ts.

中添加构造函数

问题: 如何在main.ts中传递服务？

感谢您的帮助。

Answer 1

嗯，main.ts 是 Angular 应用程序的入口点。在这里，我们无法查询服务实例或注入它们，因为我们在 Angular 应用程序之外。看起来 Storage 对象也与 Angular 应用程序完全分离，因此您必须自己进行任何依赖注入。

另请注意：虽然我找不到任何关于此的明确文档，但此存储 class 的亚马逊 example 的所有属性都是静态的，所以我不确定是否配置需要一个 class 的实例。

有人认为我会劫持 APP_INITIALIZER 以便在应用程序首次引导时获取 DI 令牌。但是，我对Amplify不熟悉，所以我不知道什么时候需要配置它，所以这可能有效也可能无效：

App.module.ts

providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: amplifyConfigFactory,
    deps: [CookieService],
    multi: true
  }
]

amplifyConfigFactory.factory.ts

export function amplifyConfigFactory(cookieService: CookieService) {
  Amplify.configure({
    // ....
    storage: new MyStorage(cookieService)
  });

  return () => Promise.resolve(); // factories must return a Promise
}

所以，上面我们的 deps 条目被实例化并按顺序注入到工厂中，我们可以使用 Injector 中的 cookieService 创建一个 MyStorage。

同样，如果 MyStorage 上的属性必须是静态的，您将需要一个不同的解决方案。在我看来 MyStorage 不应该是 Angular 应用程序已知的东西，但取决于是否需要在 APP_INITIALIZER 挂钩之前配置 Amblify，这可能会起作用。

在 main.ts 中注入带有构造函数的服务

Inject a service with constructor in the main.ts

amazon-cognito

angular

aws-amplify