Angular自定义管道依赖SlicePipe报错：NullInjectorError: No provider for SlicePipe

嘿，我刚碰到过一模一样的问题！Angular的内置管道默认不会被自动注册为可注入服务，所以当你在自定义管道里依赖注入SlicePipe时，注入器找不到它的提供者，就会抛出这个NullInjectorError。下面给你两种实用的解决方案，看哪种更贴合你的需求：

方案一：手动注册SlicePipe为提供者 #

Angular的内置管道（比如SlicePipe）主要是为模板直接调用设计的，不会自动加入到注入器的提供者列表里。你需要在自定义管道所在的模块中，把SlicePipe添加到providers数组中：

首先补全你的RangePipe代码（看起来你之前没写完transform方法）：

import { Pipe, PipeTransform } from '@angular/core';
import { SlicePipe } from '@angular/common';
import { isNumeric } from 'rxjs/util/isNumeric';

@Pipe({ name: 'range' })
export class RangePipe implements PipeTransform {
  constructor(private slicePipe: SlicePipe) { }

  transform(data: any, page: number, size: number): any {
    if (Array.isArray(data) && isNumeric(page) && isNumeric(size)) {
      const startIndex = (page - 1) * size;
      const endIndex = startIndex + size;
      return this.slicePipe.transform(data, startIndex, endIndex);
    }
    // 不符合条件时返回原数据
    return data;
  }
}

然后在你的模块文件中，把SlicePipe加入到providers里：

import { NgModule } from '@angular/core';
import { CommonModule, SlicePipe } from '@angular/common';
import { RangePipe } from './range.pipe';

@NgModule({
  declarations: [RangePipe],
  imports: [CommonModule],
  providers: [SlicePipe], // 关键：这里手动注册SlicePipe
  exports: [RangePipe] // 如果需要在其他模块使用该管道的话
})
export class YourFeatureModule { }

这样注入器就能找到SlicePipe的实例，不会再报错了。

方案二：直接使用数组slice方法（更轻量） #

如果你的RangePipe只是用来处理数组分页，其实完全没必要依赖SlicePipe，直接调用数组原生的slice方法就行，这样还能省去依赖注入的配置麻烦：

import { Pipe, PipeTransform } from '@angular/core';
import { isNumeric } from 'rxjs/util/isNumeric';

@Pipe({ name: 'range' })
export class RangePipe implements PipeTransform {
  transform(data: any, page: number, size: number): any {
    if (Array.isArray(data) && isNumeric(page) && isNumeric(size)) {
      const startIndex = (page - 1) * size;
      const endIndex = startIndex + size;
      return data.slice(startIndex, endIndex);
    }
    return data;
  }
}

这种方案更简洁，不需要额外配置提供者，适合这种简单的分页场景。

总结 #

• 如果你需要复用SlicePipe的全部功能（比如同时处理字符串切片），选方案一，手动注册提供者；
• 如果只是处理数组分页，方案二更直接，省去注入的额外步骤。

内容的提问来源于stack exchange，提问作者demo