Angular Apollo 将 URI 注入 graphql.module.ts

Posted 2023-03-10

【中文标题】Angular Apollo 将 URI 注入 graphql.module.ts

【英文标题】：Angular Apollo inject URI into graphql.module.ts

【发布时间】：2020-01-14 14:44:08

【问题描述】：

我正在制作一个 Angular 库，其中包含我们所有应用程序都需要的 auth/graphql 相关代码。

问题是，我将uri 存储在 Angular 环境变量中，而 Angular 库中不存在该变量。

执行ng add apollo-angular 会生成以下模块：

graphql.module.ts（为清楚起见删除了导入）：

const uri = ''; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) 
  return 
    link: httpLink.create(uri),
    cache: new InMemoryCache(),
  ;


@NgModule(
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    ,
  ],
)
export class GraphQLModule 

注意uri，它创建了对这个模块的依赖，应该被注入。

在我的应用程序app.module.ts 中，我创建了一个获取环境的提供程序：

providers: [
    
      provide: 'envVars', useValue: environment
    
  ]

我通常像这样通过构造函数注入：

constructor(@Inject('envVars') private envVars: any) 

我尝试了很多方法来注入这个uri，但无济于事！有什么建议吗？

【参考方案1】：

我在 *** 帖子中找到了解决问题的方法：

https://***.com/a/46791075/1207856

但是我根据自己的独特情况调整了我的。

首先在AppModule app.module.ts中，使用forRoot()静态方法提供环境：

GraphQLModule.forRoot(environment)

其次，在您的库模块中，您可以将该环境设置为您的类的静态成员，如下所示：

export class GraphQLModule 
  public static envVars: any

  public static forRoot(environment: any): ModuleWithProviders 
    // this is to provide to this module non-class section
    this.envVars = environment

    // this is provide to children
    return 
      ngModule: GraphQLModule,
      providers: [
        
            provide: 'envVars', 
            useValue: environment
        
      ]
    
  

现在我可以在这个实际模块本身中静态使用它，或者通过@Inject 在使用这个模块的任何子组件或模块中使用它。

所以在这个实际的模块中我可以这样做：

GraphQLModule.envVars.gatewayUri

或者在另一个类的构造函数中，我可以这样做：

constructor(@Inject('envVars') private envVars: any)

享受吧！