英文:
Angular Dynamic Pipe
问题
我正在尝试构建动态管道，虽然我已经在应用程序模块提供程序中包含了管道，但它抛出了NullInjector错误。
我建议打开开发者选项中的控制台窗口以查看错误。
我还附上了以下链接以供演示。
在实际情况中，管道的值将来自服务器，因此我需要一个动态管道。
链接：https://stackblitz.com/edit/angular-lcidq5-q1a3hv?file=src%2Fapp%2Ftest%2Ftest.component.html
英文:
I am trying to build the dynamic pipe and though I have included the pipes in the app module provider, it is throwing the NullInjector error.
I would suggest to open the Console window inside the Developer options to see the error.
I have also attached the below link for the demo.
In a real scenario, the pipe value will be coming from the server so I am in need of a dynamic pipe.
https://stackblitz.com/edit/angular-lcidq5-q1a3hv?file=src%2Fapp%2Ftest%2Ftest.component.html
答案1
得分: 2
A string does not work as a valid token for the inject method.
我建议创建一个对象来存储您的管道类型：
import { Injector, Pipe, PipeTransform } from '@angular/core';
import { CustomPipe } from './custom.pipe';
const pipes = {
fullform: CustomPipe,
};
@Pipe({
name: 'dynamic',
})
export class DynamicPipe implements PipeTransform {
public constructor(private injector: Injector) {}
transform(value: any, pipeToken: any, pipeArgs: any[]): any {
if (!pipeToken) {
return value;
} else {
let pipe = this.injector.get<any>(pipes[pipeToken]);
return pipe.transform(value, ...pipeArgs);
}
}
}
这样，您需要将管道添加到此对象中才能使其工作，但您可以将从API获取的字符串传递给它们的相应注入器令牌。
英文:
A string does not work as a valid token for the inject method.
I suggest creating an object that stores the types of your pipes:
import { Injector, Pipe, PipeTransform } from '@angular/core';
import { CustomPipe } from './custom.pipe';
const pipes = {
fullform: CustomPipe,
};
@Pipe({
name: 'dynamic',
})
export class DynamicPipe implements PipeTransform {
public constructor(private injector: Injector) {}
transform(value: any, pipeToken: any, pipeArgs: any[]): any {
if (!pipeToken) {
return value;
} else {
let pipe = this.injector.get<any>(pipes[pipeToken]);
return pipe.transform(value, ...pipeArgs);
}
}
}
This way, you will have to add the pipes to this object for it to work, but you can pass the strings you get from your API and convert them to their respective injector token.
答案2
得分: 0
你只需在模块中定义一个提供者：
providers: [
CustomPipe,
DynamicPipe,
{ provide: 'fullform', useClass: CustomPipe },
],
英文:
You just to define a provider on the module
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent, TestComponent, DynamicPipe, CustomPipe],
imports: [
BrowserModule,
BrowserAnimationsModule,
TooltipsModule,
DateInputsModule,
ButtonsModule,
],
providers: [
CustomPipe,
DynamicPipe,
{ provide: 'fullform', useClass: CustomPipe },
],
})
export class AppModule {}
答案3
得分: 0
为了通过字符串注入提供者，您需要将令牌映射到app.module.ts中的管道：
providers: [{ provide: 'fullform', useValue: CustomPipe }],
然后，在您的动态管道中，您需要实例化管道：
let Pipe = this.injector.get<any>(pipeToken);
let pipe = new Pipe();
return pipe.transform(value, ...pipeArgs);
https://stackblitz.com/edit/angular-lcidq5-w94gsj?file=src%2Fapp%2Fdynamic.pipe.ts
英文:
To inject the provider by string, you need to map the token to the pipe in the app.module.ts:
providers: [{ provide: 'fullform', useValue: CustomPipe }],
Then, in your dynamic pipe, you need to instantiate the pipe:
let Pipe = this.injector.get<any>(pipeToken);
let pipe = new Pipe();
return pipe.transform(value, ...pipeArgs);
https://stackblitz.com/edit/angular-lcidq5-w94gsj?file=src%2Fapp%2Fdynamic.pipe.ts
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论