Angular2如何覆盖提供者

Question

我是Angular的新手,对提供商覆盖有疑问.我想在我的项目https://www.npmjs.com/package/mydatepicker中使用这个日期选择器.

我想覆盖此库的组件使用的语言环境提供程序.以下是https://plnkr.co/edit/fS8IoJqB8PYvgNEVGIMY示例.

我从库类(my.locale.service.ts)扩展了LocaleService,并希望使用它而不是它,所以我在我的模块中指定了它:

providers: [{provide: LocaleService, useClass: MyLocaleService }]

但它不起作用,组件仍然使用它自己的LocaleService.我怎样才能做到这一点？

谢谢!

Answer 1

https://angular.io/guide/ngmodule-faq#what-if-two-modules-provide-the-same-service

如果两个模块提供相同的服务怎么办？当两个导入的模块同时加载时,列出具有相同令牌的提供者,第二个模块的提供者"获胜".那是因为两个提供者都被添加到同一个注射器中.

当Angular寻找为该令牌注入服务时,它会创建并传递由第二个提供者创建的实例.

每个注入此服务的类都会获取第二个提供程序创建的实例.即使在第一个模块中声明的类也会获得第二个提供程序创建的实例.这可能是一个不受欢迎的惊喜.

如果模块A为令牌"X"提供服务并导入也为令牌"X"提供服务的模块B,则模块A的服务定义"获胜".

根AppModule提供的服务优先于导入模块提供的服务.AppModule总是赢.

如果您提供此提供程序,AppModule将使用导入模块中提供的提供程序.

对于延迟加载的模块,这是不同的.如果在延迟加载的模块中提供了提供程序,则此模块延迟加载的组件和服务将从延迟加载的模块的提供程序获得依赖项,即使它也在AppModule中提供.

Answer 2

您的路径似乎导入错误，并且您的服务文件需要位于 src 目录内。

import {MyDatePickerModule} from "mydatepicker/dist/my-date-picker.module";
import {LocaleService} from "mydatepicker/dist/services/my-date-picker.locale.service";
import {MyLocaleService} from "./my.locale.service";

请参阅下面的工作 plunkr

https://plnkr.co/edit/e63S9dGXSc65BcKWMPnd?p=preview