延迟加载模块中的提供程序答案

【问题标题】：Provider in lazy loaded modules延迟加载模块中的提供程序
【发布时间】：2020-07-08 03:51:19
【问题描述】：

我创建了一个带有延迟加载模块 (LazyModuleModule) 的新 Angular 项目。

Stackblitz：HERE

该模块在路由模块中被懒加载：

   loadChildren: () => import('../app/lazy-module/lazy-module.module').then(m => m.LazyModuleModule)

惰性模块本身没有组件或任何指令。它只使用单个组件 (ShowComponent) 导入另一个急切加载的模块“EagerModule”。

在这个组件中，我想注入一个派生自抽象服务“TestAbstractService”的服务（TestService）。

我现在在 EagerModule 中提供了 TestServiceAbstract：

{provide: TestServiceAbstract, useClass: TestService}

但在编译项目时，我收到一条错误消息：“无法解析 ShowComponent 的所有参数”。

我真的看不出这种方法不起作用的任何原因。如果我直接在 app.module 中提供 TestService 一切正常，但这对我来说很奇怪。

提示：要查看 stackblitz 中的错误消息，您需要打开控制台并单击“发生了一些神奇的事情”-文本。这会路由到有错误的组件。

【问题讨论】：

标签： angular dependency-injection

【解决方案1】：

“TestServiceAbstract”的导入未在 ShowComponent 中完成。您在 ShowComponent 中导入了“TestService”而不是“TestServiceAbstract”。

为您在构造函数中注入的 TestServiceAbstract 添加正确的导入：

import { TestServiceAbstract } from '../../abstract.test.service';

请将 show.component.ts 替换为以下代码。这应该有效：

import { Component, OnInit } from '@angular/core';
import { TestServiceAbstract } from '../../abstract.test.service';

@Component({
   selector: 'app-show',
   templateUrl: './show.component.html',
   styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {

   constructor(public testService: TestServiceAbstract) { }

   ngOnInit() {
     alert(this.testService.getNumber())
   }
}

Show component with alert message

【讨论】：