javascript - Angular4/5 依赖注入(inject)文档不起作用

Question

https://angular.io/guide/architecture#services

我正在按照 angular.io 上的文档注入(inject)服务等依赖项。我做了他们所说的一切，当我尝试运行它时，控制台不断告诉我:

Uncaught ReferenceError: LedgerService is not defined

除了使用服务创建一个简单的组件之外，我没有做任何疯狂的事情，其中​​两个构造函数都有 console.log 命令(组件和服务中的构造函数)。我已经完成了 Angular 在详细介绍 Angular 这个功能的两段中所说的一切。

组件本身被注入(inject)到主应用程序模块中(服务被注入(inject)到组件中)，并且组件和服务都是使用 Angular CLI 创建的。因此，除了尝试注入(inject)服务之外，我根本没有做太多事情。所以我不确定哪里出了问题，但它肯定不起作用，只是显示一个空白页面(以前默认情况下有基本内容)。

我创建了这两个单元，尝试在 app.module 和 component.ts 文件中指定提供程序，但两者都不起作用并产生相同的错误 - 当 Angular 声称两者都可以工作时。我还在 component.ts 文件的构造函数中将其指定为私有(private)服务。

我所看到的与此相关的所有内容都适用于 Angular 1 或 2。它们与 Angular 4/5 都没有一点相似之处。

如果您确实想查看这段代码，那很好，但它实际上只是框架，没有其他内容:

bookkeeper.component.ts:

import { Component, OnInit } from '@angular/core';

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

    constructor(private service: LedgerServiceService) { }

    ngOnInit() {
        console.log("Ledger component works!");
    }

}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { InterfaceComponent } from './interface/interface.component';
import { BookkeeperComponent } from './bookkeeper/bookkeeper.component';


@NgModule({
  declarations: [
    AppComponent,
    InterfaceComponent,
    BookkeeperComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    LedgerServiceService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ledger-service.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class LedgerServiceService {

    constructor() { 
        console.log("wtf");
    }

}

LedgerService 实际上称为 LedgerServiceService，因为我最初手动创建了 LedgerService，然后尝试使用 AngularCLI 生成服务并将其命名为 LedgerService，它创建了一个名为 LedgerServiceService 的服务。命名并不是什么错误。我最初只是将其简单地称为 LedgerService，因为我认为这会令人困惑。

Answer 1

您的示例缺少导入。

任何使用自定义类型的地方，我们都需要导入该类型。

因此，您需要在模块和组件中添加:

import { LedgerServiceService } from './your-path-here' 

您可以在他们在 https://angular.io/guide/dependency-injection 上提供的示例中看到这一点