Question

我启动了一个项目，以更好地学习Angular，最近开始将其重构为使用服务在组件之间共享数据。有5个相关组件，除其中一个组件外，其他所有组件都共享同一服务实例。另一个有它自己的实例，我不知道为什么。

具有最新代码的分支在这里（请注意，它是大型重构分支，而不是主分支）：https://github.com/epoblaguev/Gloomhaven-Calculator/tree/Large-Refactor

正在使用的服务是：/src/app/character.service.ts

起作用的四个组件都位于： /src/app/modules/stats-module/

无法正常工作的组件是： /src/app/modules/perk-chooser/

如果我从以下位置更改CharacterService中的Injectable装饰器：

@Injectable({provideIn: 'root' })
export class CharacterService {

到

@Injectable()
export class CharacterService {

并将服务包含在AppModule的提供程序列表中，PerkChooserComponent会引发以下错误，而其他组件也很好：

AppComponent.html:46 ERROR Error: StaticInjectorError(AppModule)[PerkChooserComponent -> CharacterService]: 
  StaticInjectorError(Platform: core)[PerkChooserComponent -> CharacterService]: 
    NullInjectorError: No provider for CharacterService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveNgModuleDep (core.js:21217)
    at NgModuleRef_.push../node_modules/@an

我认为该问题的症状是将服务注入到延迟加载的组件中，但是我不知道该怎么办。

Answer 1

您的代码运行正常。可能您需要停止并重新运行该应用程序。或者您可以运行

<div id="kitties"></div>

Answer 2

解决方案是创建一个新组件（我称其为Perk-Selector），将所有旧代码复制到其中，然后删除旧组件（包括所有引用）。然后一切都按预期运行。

我不明白潜在的问题是什么。我以前曾尝试在另一台计算机上克隆和构建项目，但是存在相同的问题。

一个组件获取新的服务实例而不是共享实例

2 个答案: