使用不同名称的管道
Using a pipe under a different name
我在 Angular 6 应用程序中使用 ngx-translate 国际化库。现在我的一个模板中的翻译是这样完成的:
<span>{{ 'HELLO' | translate:param }}</span>
不过,要是能这样就好了:
<span>{{ 'HELLO' | i18n:param }}</span>
我所要做的就是以某种方式给管道起一个别名,但我不知道如何实现。我开始写类似...
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Pipe({ name: 'i18n' })
export class I18nPipe implements PipeTransform {
constructor(private i18n: TranslateService) { }
transform(key: string, ...args: any[]): any {
this.i18n.get(key).subscribe((res: string) => {
return res || key;
});
}
// How to return if async? How to process args?
}
但是我什至应该这样编码吗,或者在 Angular 中是否有一种简单的通用方法来为管道添加别名?
我尝试的另一种方式:
import { Pipe, PipeTransform } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
@Pipe({ name: 'i18n' })
export class I18nPipe extends TranslatePipe implements PipeTransform {
transform(key: string, args?: any): any {
return super.transform(key, args);
}
}
这给了我一个错误:
ERROR TypeError: Cannot read property 'get' of undefined
at I18nPipe.updateValue (ngx-translate-core.js:1058)
at I18nPipe.transform (ngx-translate-core.js:1097)
at I18nPipe.transform (i18n.pipe.ts:8)
你可以把原来的管子包起来
@Pipe({name: 'i18n'})
export class I18nPipe implements PipeTransform {
constructor(private translatePipe: TranslatePipe) {
}
transform(query: string, ...args: any[]) {
return this.translatePipe.transform(query, args);
}
}
您可以扩展原始管道,无需添加任何实现代码:
import { Pipe } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
@Pipe({ name: 'i18n' })
export class I18nPipe extends TranslatePipe { }
有关演示,请参阅 this stackblitz。
我在 Angular 6 应用程序中使用 ngx-translate 国际化库。现在我的一个模板中的翻译是这样完成的:
<span>{{ 'HELLO' | translate:param }}</span>
不过,要是能这样就好了:
<span>{{ 'HELLO' | i18n:param }}</span>
我所要做的就是以某种方式给管道起一个别名,但我不知道如何实现。我开始写类似...
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Pipe({ name: 'i18n' })
export class I18nPipe implements PipeTransform {
constructor(private i18n: TranslateService) { }
transform(key: string, ...args: any[]): any {
this.i18n.get(key).subscribe((res: string) => {
return res || key;
});
}
// How to return if async? How to process args?
}
但是我什至应该这样编码吗,或者在 Angular 中是否有一种简单的通用方法来为管道添加别名?
我尝试的另一种方式:
import { Pipe, PipeTransform } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
@Pipe({ name: 'i18n' })
export class I18nPipe extends TranslatePipe implements PipeTransform {
transform(key: string, args?: any): any {
return super.transform(key, args);
}
}
这给了我一个错误:
ERROR TypeError: Cannot read property 'get' of undefined
at I18nPipe.updateValue (ngx-translate-core.js:1058)
at I18nPipe.transform (ngx-translate-core.js:1097)
at I18nPipe.transform (i18n.pipe.ts:8)
你可以把原来的管子包起来
@Pipe({name: 'i18n'})
export class I18nPipe implements PipeTransform {
constructor(private translatePipe: TranslatePipe) {
}
transform(query: string, ...args: any[]) {
return this.translatePipe.transform(query, args);
}
}
您可以扩展原始管道,无需添加任何实现代码:
import { Pipe } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
@Pipe({ name: 'i18n' })
export class I18nPipe extends TranslatePipe { }
有关演示,请参阅 this stackblitz。