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

Angular 7: NullInjectorError: No provider for PagerService

提问by veben

I am trying to implement pagination but It's not working. Here is my code:

我正在尝试实现分页，但它不起作用。这是我的代码：

pager.service.ts:

pager.service.ts：

  import * as _ from 'underscore';
  @Injectable({
      providedIn: 'root',
  })
export class PagerService {
  getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {

    // calculate total pages
    let totalPages = Math.ceil(totalItems / pageSize);

    let startPage: number, endPage: number;
    if (totalPages <= 10) {
      // less than 10 total pages so show all
      startPage = 1;
      endPage = totalPages;
    } else {
      // more than 10 total pages so calculate start and end pages
      if (currentPage <= 6) {
        startPage = 1;
        endPage = 10;
      } else if (currentPage + 4 >= totalPages) {
        startPage = totalPages - 9;
        endPage = totalPages;
      } else {
        startPage = currentPage - 5;
        endPage = currentPage + 4;
      }
    }

    // calculate start and end item indexes
    let startIndex = (currentPage - 1) * pageSize;
    let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    // create an array of pages to ng-repeat in the pager control
    let pages = _.range(startPage, endPage + 1);

    // return object with all pager properties required by the view
    return {
      totalItems: totalItems,
      currentPage: currentPage,
      pageSize: pageSize,
      totalPages: totalPages,
      startPage: startPage,
      endPage: endPage,
      startIndex: startIndex,
      endIndex: endIndex,
      pages: pages
    };
  }
}

quick-worker-list.component.ts:

快速工人列表.component.ts：

import { JobService } from '@app/services';
import { PagerService } from './../../../services/pager.service';
import { Component, OnInit, Input } from '@angular/core';

import * as _ from 'underscore';

@Component({
  selector: 'app-quick-worker-list',
  templateUrl: './quick-worker-list.component.html',
  styles: []
})
export class QuickWorkerListComponent implements OnInit {
  S3ImageUrl: string;

  // array of all items to be paged
  private workerData: any[];

  // pager object
  pager: any = {};

  // paged items
  pagedItems: any[];


  constructor(private pagerService: PagerService, private jobService: JobService) {
  }

  ngOnInit() {
    this.jobService.getQuickJobWorkerList(1301, 1)
      .map((response: Response) => response.json())
      .subscribe(data => {
        // set items to json response
        this.workerData = data;

        // initialize to page 1
        this.setPage(1);
      });
  }

  setPage(page: number) {
    if (page < 1 || page > this.pager.totalPages) {
      return;
    }

    // get pager object from service
    this.pager = this.pagerService.getPager(this.allItems.length, page);

    // get current page of items
    this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
  }
}

I get this error:

我收到此错误：

QuickWorkerListComponent_Host.ngfactory.js? [sm]:1 ERROR Error: StaticInjectorError(AppModule)[QuickWorkerListComponent -> PagerService]: StaticInjectorError(Platform: core)[QuickWorkerListComponent -> PagerService]: NullInjectorError: No provider for PagerService! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228) at resolveToken (core.js:3473) at tryResolveToken (core.js:3417) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) at resolveToken (core.js:3473) at tryResolveToken (core.js:3417) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) at resolveNgModuleDep (core.js:19784) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473) at resolveNgModuleDep (core.js:19784)

QuickWorkerListComponent_Host.ngfactory.js？[sm]:1 ERROR 错误：StaticInjectorError(AppModule)[QuickWorkerListComponent -> PagerService]: StaticInjectorError(Platform: core)[QuickWorkerListComponent -> PagerService]: NullInjectorError: No provider for PagerService！在 NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228) at resolveToken (core.js:3473) at tryResolveToken (core.js:3417) at StaticInjector .push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) at resolveToken (core.js:3473) at tryResolveToken (core.js:3417) at StaticInjector.push ../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) at resolveNgModuleDep (core.js:19784) at NgModuleRef_.push..

回答by veben

Following the error text, you have to import and add your PagerServicein the Providerpart of your app.module.tsfile:

在错误文本之后，您必须PagerService在文件的Provider部分导入并添加您的app.module.ts：

providers: [
    PagerService,
  ],

And don't forget to declare it as Injectable:

并且不要忘记将其声明为Injectable：

@Injectable()
export class PagerService {

   // ...

}

回答by nircraft

Your error is related to PagerService, not with the underscore

您的错误与 相关PagerService，与下划线无关

NullInjectorError: No provider for PagerService! at

NullInjectorError：PagerService 没有提供程序！在

make sure your service is registered in list of providers at app.module or has the Injectabledeclaration at top:

确保您的服务已在 app.module 的提供商列表中注册或Injectable在顶部具有声明：

@Injectable({
  providedIn: 'root',
})

a common example of service in angular 7 is below:

angular 7 中的一个常见服务示例如下：

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

@Injectable({
  providedIn: 'root',
})
export class MyService{

  constructor() { }

}

please refer to documentationfor more details.

请参阅文档了解更多详情。

回答by Vikram Jangra

Page Service or Job Service both should have Injectable attribute applied or check if you are injecting something in these services also then same applies to that also.

Page Service 或 Job Service 都应该应用 Injectable 属性，或者检查您是否在这些服务中注入了某些内容，然后同样适用于该属性。