NullInjectorError: No provider for SlicePipe
NullInjectorError: No provider for SlicePipe
我创建了自定义 pipe
,它使用另一个内置 pipe
这是示例:
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 start_index = (page - 1) * size;
if (data.length < start_index) {
return [];
} else {
return this.slicePipe.transform(data.slice(start_index), size);
}
} else {
return data;
}
}
}
还将我的自定义 pipe
添加到 app.module
@NgModule({
imports: [
BrowserModule,
FormsModule,
routing
],
declarations: [
AppComponent,
...
RangePipe
],
providers: [],
bootstrap: [AppComponent]
})
但是报错
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RangePipe -> SlicePipe]:
StaticInjectorError(Platform: core)[RangePipe -> SlicePipe]:
NullInjectorError: No provider for SlicePipe!
我的问题在哪里?我是不是忘记注册了?
假设您需要在 angular DI 中使用自定义 class。
import {FactoryProvider} from "@angular/core";
import {SlicePipe} from "@angular/common";
class AwesomePipe{
constructor(private slicePipe: SlicePipe){
}
}
这取决于其他一些 classes
class AwesomeClassProvider implements FactoryProvider{
provide: AwesomePipe;
useFactory(pipe: SlicePipe) {
return new AwesomePipe(pipe);
}
deps: [SlicePipe]
}
只是扩展了 SlicePipe
import { Pipe, PipeTransform } from '@angular/core';
import { SlicePipe } from '@angular/common';
import { isNumeric } from 'rxjs/util/isNumeric';
@Pipe({ name: 'range' })
export class RangePipe extends SlicePipe implements PipeTransform {
public transform(data: any, page: number, size: number): any {
if (Array.isArray(data) && isNumeric(page) && isNumeric(size)) {
const start_index = (page - 1) * size;
if (data.length < start_index) {
return [];
} else {
return super.transform(data.slice(start_index), size);
}
} else {
return data;
}
}
}
希望对您有所帮助。
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [RangePipe],
bootstrap: [AppComponent]
})
我创建了自定义 pipe
,它使用另一个内置 pipe
这是示例:
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 start_index = (page - 1) * size;
if (data.length < start_index) {
return [];
} else {
return this.slicePipe.transform(data.slice(start_index), size);
}
} else {
return data;
}
}
}
还将我的自定义 pipe
添加到 app.module
@NgModule({
imports: [
BrowserModule,
FormsModule,
routing
],
declarations: [
AppComponent,
...
RangePipe
],
providers: [],
bootstrap: [AppComponent]
})
但是报错
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RangePipe -> SlicePipe]: StaticInjectorError(Platform: core)[RangePipe -> SlicePipe]: NullInjectorError: No provider for SlicePipe!
我的问题在哪里?我是不是忘记注册了?
假设您需要在 angular DI 中使用自定义 class。
import {FactoryProvider} from "@angular/core";
import {SlicePipe} from "@angular/common";
class AwesomePipe{
constructor(private slicePipe: SlicePipe){
}
}
这取决于其他一些 classes
class AwesomeClassProvider implements FactoryProvider{
provide: AwesomePipe;
useFactory(pipe: SlicePipe) {
return new AwesomePipe(pipe);
}
deps: [SlicePipe]
}
只是扩展了 SlicePipe
import { Pipe, PipeTransform } from '@angular/core';
import { SlicePipe } from '@angular/common';
import { isNumeric } from 'rxjs/util/isNumeric';
@Pipe({ name: 'range' })
export class RangePipe extends SlicePipe implements PipeTransform {
public transform(data: any, page: number, size: number): any {
if (Array.isArray(data) && isNumeric(page) && isNumeric(size)) {
const start_index = (page - 1) * size;
if (data.length < start_index) {
return [];
} else {
return super.transform(data.slice(start_index), size);
}
} else {
return data;
}
}
}
希望对您有所帮助。
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [RangePipe],
bootstrap: [AppComponent]
})