我设置了一个指令，该指令根据您作为参数传递的管道（@Input）将格式赋予输入值。我将其用于反应形式。
为此，我需要导入所有需要的管道（现在一个），并提供一个开关以使用正确的管道。
我的问题是：是否有一种方法可以从喷射器中获取任何管道，而只需知道其标记即可const pipe = injector.get(‘currency’)；
这是我的指令代码：
import { Input, Renderer2, ElementRef, forwardRef, Directive, HostListener } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { CurrencyPipe } from '@angular/common';
@Directive({
selector: '[formatInput]',
providers: [
{ provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => FormatInputDirective) },
],
})
export class FormatInputDirective implements ControlValueAccessor {
private changeCallback: Function;
private touchedCallback: Function;
@Input() pipe: any; // { token: string, args: any[] }
@HostListener('input', ['$event.target.value'])
onChange(value) {
this.changeCallback(value);
}
@HostListener('blur', ['$event.target'])
onBlur(target) {
this.touchedCallback();
}
constructor(private renderer: Renderer2, private currency: CurrencyPipe, private elRef: ElementRef ) {
this.changeCallback = (_: any) => {};
this.touchedCallback = () => {};
}
writeValue(value: any): void {
this.renderer.setProperty(this.elRef.nativeElement, 'value', this.setPipedValue(value));
}
setPipedValue(value: any): any {
if (!this.pipe || !value) {
return value;
} else {
let pipe;
switch (this.pipe.token) {
case 'currency':
pipe = this.currency;
break;
}
return pipe.transform(value, ...this.pipe.args);
}
}
registerOnChange(fn) {
this.changeCallback = fn;
}
registerOnTouched(fn: any): void {
this.touchedCallback = fn;
}
}
预先感谢您的答复。
与注射一样，您首先必须提供要使用的物品。在对应的中NgModule，将CurrencyPipe（以及您稍后要注入的所有其他对象）添加到的数组中providers。
providers: [CurrencyPipe],
现在Injector，通过将其添加到指令的构造函数中来注入。
constructor (private injector: Injector)
通过使用get方法和标记作为参数，使用它来捕获所需管道的实例。在这种情况下，令牌是类本身。
const pipe = injector.get(CurrencyPipe)
现在，您有了管道的实例。您可以使用其transform方法执行转换。
this.value = pipe.transform(123456789)
请注意，Angular没有使用字符串进行依赖项注入的概念。您可以改用令牌，但是在管道的情况下，这并不能给您提供足够的能力。
如果要将管道指定为字符串，则必须自己定义映射。
const MAP = { 'currency': CurrencyPipe, 'decimal': DecimalPipe }
现在，使用此映射来生成正确管道的实例。
const pipeName = 'currency'
const pipeClass = MAP[pipeName]
const pipe = injector.get(pipeClass)
const value = pipe.transform(input)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句