Angular 7：NullInjectorError：没有 PagerService 的提供者

typescript

在使用Angular 7进行开发时，有时候会遇到一些错误。其中一个常见的错误是"NullInjectorError: No provider for PagerService"。这个错误通常出现在我们尝试在组件中使用PagerService服务时。

什么是NullInjectorError？

NullInjectorError是Angular框架中的一个错误类，它表示注入器无法找到所需的提供者。在这种情况下，我们尝试在组件中使用PagerService服务，但是Angular无法找到该服务的提供者。

为什么会出现NullInjectorError？

出现NullInjectorError的原因可能是我们没有正确地配置PagerService的提供者。在Angular中，我们需要在模块或组件的提供者数组中注册服务的提供者，以便注入器可以找到并提供该服务。

如何解决NullInjectorError？

要解决NullInjectorError，我们需要在相应的模块或组件中注册PagerService的提供者。下面是一个解决NullInjectorError的示例代码：

首先，我们需要在app.module.ts文件中导入PagerService，并将其添加到providers数组中：

typescript
import { PagerService } from './pager.service';
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
  ],
  providers: [
    PagerService, // 添加PagerService的提供者
    // ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来，在我们想要使用PagerService的组件中，我们需要在组件的providers数组中注册PagerService的提供者。例如，假设我们有一个名为"UserComponent"的组件，我们可以在user.component.ts文件中进行如下操作：

typescript
import { Component, OnInit } from '@angular/core';
import { PagerService } from './pager.service';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.CSS'],
  providers: [PagerService] // 添加PagerService的提供者
})
export class UserComponent implements OnInit {
  // ...
}

通过在组件的providers数组中注册PagerService的提供者，我们告诉Angular注入器在需要时如何提供PagerService的实例。这样，当我们在组件中使用PagerService时，Angular就能够找到并提供该服务，从而避免了NullInjectorError的错误。

NullInjectorError是Angular开发中常见的错误之一，它表示注入器无法找到所需的提供者。要解决NullInjectorError，我们需要在相应的模块或组件中注册服务的提供者。在本例中，我们演示了如何注册PagerService的提供者，以解决NullInjectorError。

通过正确配置服务的提供者，我们可以避免NullInjectorError，并确保在组件中正确地使用所需的服务。这样，我们可以顺利地进行Angular应用程序的开发和测试。