为什么我的服务无法正确注入 Angular 中的组件？

Question

我的 Angular 应用程序（及相关部分）的结构如下：

app/app.module.ts

import { DbService } from './db.service'


const APP_CONTAINERS = [
  DefaultLayoutComponent,
  DefaultHeaderComponent,
];

@NgModule({
  declarations: [ ...APP_CONTAINERS ],
  providers: [ DbService ]

})

export class AppModule {}

app/containers/default-layout.component.ts

import { Component, HostBinding, Inject } from '@angular/core';
import { DbService } from '../../db.service';
import { navItems } from './_nav';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html'
})
export class DefaultLayoutComponent {
  @HostBinding('class.c-app') cAppClass = true;

  constructor(private DbService: DbService) {}

  async ngOnInit() {
    console.log('working') 
   }
}

我在网站的其他部分成功地使用了相同的服务，但它们都有特定的 module.ts 文件。我按照 Angular 教程进行了操作，但无论我如何尝试注入此服务，我仍然遇到错误。

我也尝试在我的构造函数中使用@Inject，但收到了同样的错误。

我目前在我的控制台中收到以下错误：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(e)[e -> e -> e -> e]: 
  NullInjectorError: No provider for e!
NullInjectorError: R3InjectorError(e)[e -> e -> e -> e]: 
  NullInjectorError: No provider for e!

Answer 1

I use this same service successfully in other portions of my site but they all have specific module.ts files

所以不清楚你是如何划分你的模块的。从模块文件看，该组件并不在提供服务的模块中。该服务必须位于组件所在的注入树的提供者中。如果该模块文件用于不同的模块，那么注入器必须知道您想要为服务提供什么。

一种解决方案是将其添加到组件的提供程序中。但是，这将获得与其他模块不同的服务实例：

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html',
  providers: [DbService]
})
export class DefaultLayoutComponent {

您也可以将它添加到组件所在模块的提供者中，但这也会得到不同的实例。

我认为最好的方法是定义服务，以便它应该在根模块中提供。这样你就不必在任何地方的提供者中添加它，angular 会在需要时自动将它添加到根模块的提供者中。这就引出了屋大维在他的评论中所说的话。我认为您只是将此代码错误地放在组件而不是服务中。将此移动到服务并从模块中的 providers 数组中删除服务：

@Injectable({
  providedIn: 'root'
})

为什么我的服务无法正确注入 Angular 中的组件？

Why won't my Service inject properly into a component in Angular?

javascript

service

angular