Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/406.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 使用不同名称的管道_Angular_Angular Pipe_Ngx Translate - Fatal编程技术网

Angular 使用不同名称的管道

Angular 使用不同名称的管道,angular,angular-pipe,ngx-translate,Angular,Angular Pipe,Ngx Translate,我在Angular 6应用程序中使用ngx translate国际化库。现在,我的一个模板中的翻译如下所示: <span>{{ 'HELLO' | translate:param }}</span> 但我是否应该这样编码,或者在Angular to alias管道中是否有一种简单的通用方法 我试过的另一种方法是: import { Pipe, PipeTransform } from '@angular/core'; import { TranslatePipe } f

我在Angular 6应用程序中使用ngx translate国际化库。现在,我的一个模板中的翻译如下所示:

<span>{{ 'HELLO' | translate:param }}</span>
但我是否应该这样编码,或者在Angular to alias管道中是否有一种简单的通用方法

我试过的另一种方法是:

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 { }

请参阅演示。

为什么要这样做?只是为了在我的模板中留出几个字符,而且因为我喜欢
i18n
translate
更好。这是我尝试的第一件事,但为此我得到了以下错误:无法读取I18nPipe.updateValue(ngx translate core.js:1058)中未定义的属性“get” .... 我看不出我的代码和你在stackblitz上提供的代码有什么区别。我们所有的进口商品都一样。这很奇怪,因为如果我在模板中使用
translate
,但不使用
i18n
,它就可以工作。有什么建议我应该在我的应用程序的哪个部分查找这些症状的问题吗?你可能会发现你的模块文件和stackblitz中的
app.module.ts
之间存在差异。我的导入可能有问题,因为你的解决方案也给了我一个错误,即:StaticInjectorError(AppModule)[I18nPipe->TranslatePipe]:StaticInjectorError(Platform:core)[I18nPipe->translateePipe]:NullInjectorError:没有TranslateePie的提供程序!
@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 { }