Question

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

我跟踪angular.io上的文档以注入服务等依赖项。我做了他们所说的一切，当我尝试运行它时，控制台一直告诉我：

Uncaught ReferenceError: LedgerService is not defined

除了使用服务创建一个简单的组件，其中两个构造函数都有console.log命令（组件和服务中的构造函数）之外，我什么都不做。我已经完成了Angular在其2段中所做的一切，详细介绍了Angular的这一特性。

组件本身被注入主app模块（服务被注入组件），组件和服务都是使用Angular CLI创建的。因此，我甚至没有做过多次尝试注入服务。因此，我不确定它出错的地方，但它绝对不起作用，只显示一个空白页面（默认情况下它之前有基本内容）。

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

我所看到的与此相关的所有内容始终都是针对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

的示例中看到这一点

Angular4 / 5依赖注入文档不起作用

1 个答案: