пытается унаследовать / расширить функцию канала ngx-translate, но возвращает пустую строку - PullRequest
0 голосов
/ 24 апреля 2020

именно то, что написано в заголовке. Я пытаюсь наследовать от translatePipe, но в результате получается пустая строка. Когда я использую обычную translatePipe, все работает нормально, но когда я изменяю ее на свой собственный dynamicTranslatePipe, это пустая строка, а не мой перевод.

//shared.module.ts
import { CommonModule } from '@angular/common';
import { NgModule, ChangeDetectorRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateModule, TranslateLoader, TranslateService, LangChangeEvent, TranslatePipe } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';


// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient,'./assets/i18n/', '.json');
}  



@Pipe({name:'dynamicTranslate'})
export class dynamicTranslatePipe extends TranslatePipe implements PipeTransform{
  constructor( translate: TranslateService,  _ref: ChangeDetectorRef){
    super(translate, _ref)
  }

  transform(baseText: string): string { 

    let result = super.transform(baseText)
    return result
  }
}

@NgModule({
 imports: [ 
    CommonModule,
    TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      }),
    FontAwesomeModule,

    ],
 declarations: [ dynamicTranslatePipe ],
 exports:      [ CommonModule, FormsModule, TranslateModule, FontAwesomeModule, dynamicTranslatePipe ]
})
export class SharedModule { }

1 Ответ

0 голосов
/ 29 апреля 2020

вы должны использовать нечистую трубу, установив pure: false.

@Pipe({
  name: 'dynamicTranslate',
  pure: false
})

Но тогда ваша труба будет работать при каждом обнаружении изменений. Вы можете использовать changeDetection: ChangeDetectionStrategy.OnPush в своем компонентном декораторе. При использовании OnPu sh привязки для компонента проверяются только при изменении свойства ввода или при инициировании события.

...