Angular 7：NullInjectorError：PagerService 没有提供者

Posted 2023-02-22

【中文标题】Angular 7：NullInjectorError：PagerService 没有提供者

【英文标题】：Angular 7: NullInjectorError: No provider for PagerService

【发布时间】：2019-05-15 20:13:36

【问题描述】：

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

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：

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);
  

我收到此错误：

QuickWorkerListComponent_Host.ngfactory.js？ [sm]：1 错误错误： StaticInjectorError(AppModule)[QuickWorkerListComponent -> PagerService]：StaticInjectorError（平台： 核心)[QuickWorkerListComponent -> PagerService]: NullInjectorError：没有 PagerService 的提供者！ 在 NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228) 在 resolveToken (core.js:3473) 在 tryResolveToken (core.js:3417) 在 StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) 在 resolveToken (core.js:3473) 在 tryResolveToken (core.js:3417) 在 StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) 在 resolveNgModuleDep (core.js:19784) 在 NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473) 在 resolveNgModuleDep (core.js:19784)

【参考方案1】：

如果您使用的是单一仓库：

在 lib 模块的

providers

数组中注册您的服务 将

@Injectable()

添加到您的服务中 在应用的 AppModule 中添加 lib 模块，

imports

数组

【参考方案2】：

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

NullInjectorError：没有 PagerService 的提供者！在

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

@Injectable(
  providedIn: 'root',
)

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

import  Injectable  from '@angular/core';

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

  constructor()  

请refer to documentation for Services了解更多详情。

【讨论】：

感谢您提供此文档参考 ,,, 您拯救了我的一天 :)

乐于帮助@shruti

【参考方案3】：

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

providers: [
    PagerService,
  ],

别忘了声明为Injectable:

@Injectable()
export class PagerService 

   // ...

【参考方案4】：

Page Service 或 Job Service 都应该应用 Injectable 属性，或者检查您是否在这些服务中注入了一些东西，那么同样适用于此。