问题标签 [angular-dependency-injection]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
28 浏览

angular - 在启动时决定为通过依赖注入提供的服务使用哪个实现

假设我有一个前端应用程序需要从某个后端获取数据。让我们假设有 2 个不同的后端 REST API 实现可用,BackEnd1BackEnd2。它们都提供相同的语义,因此客户端可以使用它们中的任何一个,但它们的输入/输出对的结构不同。

为了掩盖这些差异,我可以创建一个接口,该接口BackEndInterface定义客户端将调用的方法并提供 2 个实现类,BackEndImpl1以及分别BackEndImpl2用于BackEnd1BackEnd2。使用依赖注入 (DI) 机制决定使用哪一个。

问题是是否可以使用外部配置来驱动 DI,并在应用程序启动时决定使用哪个实现,例如读取环境变量或配置文件。

0 投票
0 回答
2482 浏览

angular - Angular8 - 如何使用 InjectionToken 和 ComponentPortal 将输入传递给 CDK Overlay

我有 2 个组件:一个主组件和一个确认组件(覆盖)。

当在 home 组件上单击一个按钮时,它应该触发确认组件以 Angular CDK Overlay 的形式打开。

问题是我无法通过自定义注入器和注入令牌将任何内容从主组件传递到确认组件,正如许多其他人所建议的那样。Angular CDK:如何在 ComponentPortal 中设置输入

我在 Stackblitz 上的代码:https ://stackblitz.com/edit/angular-overlay-inject

我错过了代码中的一些愚蠢的东西吗?我不断收到 StaticInjectorError 和 NullInjectorError。

在此处输入图像描述

非常感谢第一个人。

家庭组件:

覆盖组件:

0 投票
0 回答
113 浏览

angular - 有没有办法通过依赖注入来强制 Angular 提供者的类型安全?

我想使用依赖注入来交换提供者的实现,但不知道如何使该类型安全。

我可以创建两个服务都实现的抽象类,但无法强制执行,因为其他人可以创建服务并在不使用该抽象服务的情况下注入它。

有没有办法使用 Angular 依赖注入来触发编译时错误?我想防止上面示例中发生的运行时错误。

解决我的担忧的潜在解决方法:https ://github.com/tygern/safe-provide

0 投票
1 回答
2646 浏览

angular - 如何提供具有自己的“工厂”的“InjectionToken”?

考虑以下InjectionToken类型Foo

现在假设我已经疯狂地瞄准了 100% 的测试覆盖率。为此,我必须对那个小factory功能进行单元测试。

我正在考虑创建一个在我的测试中只有一个提供者的注入器:

不幸的是,这会因编译器错误而失败,因为{ provide: FOO }它不是没有 、 或 属性的有效useValue提供useFactory程序useExisting。但是,当注入令牌带有自己的工厂时,为什么我不得不定义其中之一呢?

当然,我仍然尝试了所有选项:

  • useValue: FOO编译并运行,但似乎没有执行工厂方法
  • useFactory: () => FOO, deps: []也编译和运行,但似乎也没有执行工厂方法
  • useExisting: FOO编译,但在运行时因循环依赖错误而失败

有趣的是,文档中提供了一个类似的场景InjectionToken,但它没有显示我正在寻找的注册:

在 StackBlitz 上创建了一个示例,您可以自己尝试一下。

0 投票
2 回答
553 浏览

angular - 使用 forRoot 的默认值配置在 Dev 中有效,但在 Prod (Aot) 中无效

以下代码在 Dev 中可以正常工作,但在 Prod 模式下不能:

模块

配置令牌

模型

零件

应用模块

我想将给定的配置与我设置为默认值的配置合并。我所做的在 Dev 中效果很好,但在 Prod 中,我没有错误,但值是未定义的,看起来用于合并两个对象的扩展运算符不起作用,

非常感谢。

0 投票
1 回答
365 浏览

angular - 如何在导入中引用我的配置?

我已将 AngularFire 添加到我的项目中。在其自述文件中,我被指示AngularFireModule.initializeApp(...)AppModule

然而,在示例中,人们使用环境常量,这不是一个选项,因为部署要求有一个配置文件,然后在部署时根据部署到的环境替换变量。

我相信我的配置是在导入之后加载的,这意味着没有任何东西传递给.initializeApp(...)

app.module.ts

应用配置.ts

我非常想解决这个问题,而无需更改任何构建过程,并且只需能够使用AppConfig来检索配置。

包.json

main.ts

0 投票
3 回答
7029 浏览

angular - providedIn any 和 root 有什么区别

在 Angular 9 中,可注入装饰器选项providedIn有一个名为any. root和 和有什么不一样any

在我使用的情况下,服务是否被视为单例any

0 投票
1 回答
1014 浏览

angular - 覆盖根目录中提供的 Angular 提供程序

我在惰性模块中导入了 ng-bootstrap 的模态库。

该库NgbModal在 root 中提供了一项服务。

我将它注入到一个组件中。

我开发了一个类扩展。

如何使用 CustomNgbModal 覆盖 NgbModal 类型?

使用模块将是

但是使用提供的根元数据,没有线索。

那么,如何覆盖根目录中提供的模块?

0 投票
1 回答
147 浏览

angular - providedIn:LazyModule 失败,没有提供程序错误

我想将该providedIn选项引用到提供可声明和依赖项的 Angular 模块。我创建了一个附加模块SharedModule作为惰性模块的子模块,LazyModule以便它可以用作我想要提供的惰性服务的“锚”(CounterService在我的例子中)。我一直在遵循本指南来实现它,但显然做错了什么。另外,我做了一个小计划,但请查看StackBlitz以查看完整示例。

0 投票
10 回答
31696 浏览

angular - 此构造函数与 Angular 依赖注入不兼容,因为它在参数列表索引 0 处的依赖无效

在我的 Angular 9 应用程序中,我有一个抽象类:

和一个扩展它的组件:

一切正常,除了测试,我得到以下错误:

错误:此构造函数与 Angular 依赖注入不兼容,因为它在参数列表索引 0 处的依赖无效。如果依赖类型是像字符串这样的原始类型,或者如果此类的祖先缺少 Angular 装饰器,则可能会发生这种情况。

请检查 1) 索引 0 处的参数类型是否正确,以及 2) 为此类及其祖先定义了正确的 Angular 装饰器。