Использование трубы под другим именем

Question

Я использую библиотеку интернационализации ngx-translate в своем приложении Angular 6.Прямо сейчас перевод в одном из моих шаблонов делается так:

<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)

Answer 1

Вы можете расширить исходный канал, не добавляя код реализации:

import { Pipe } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';

@Pipe({ name: 'i18n' })
export class I18nPipe extends TranslatePipe { }

См. этот стек * блик для демонстрации.

Answer 2

Вы можете просто обернуть оригинальную трубу

@Pipe({name: 'i18n'})
export class I18nPipe implements PipeTransform {
  constructor(private translatePipe: TranslatePipe) {
  }

  transform(query: string, ...args: any[]) {
    return this.translatePipe.transform(query, args);
  }
}