如何擴展ngx-translate管道

Question

我想擴展ngx-translate的管道，使其在我的應用程序中具有潛在的多用途。

我管：

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

@Pipe({ 
    name: 'msg' 
}) 

export class MsgPipe extends TranslatePipe implements PipeTransform { 
    transform(value: any, args: any[]): any { 
    return super.transform(value, args) 
    } 
} 

爲了等待有關轉換模塊加載，我用角的APP_INITIALIZER：

app.module：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { HttpClientModule, HttpClient } from '@angular/common/http'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 
import { appRoutes } from './app.routes'; 
import { AppComponent } from './root/app.component'; 
import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component'; 
import { HomePageComponent } from './shared/components/home-page/home-page.component'; 
import { MsgPipe } from './shared/pipes/msg.pipe'; 
import { ChangeDetectorRef } from '@angular/core'; 
import { TranslateModule, TranslateLoader } from "@ngx-translate/core"; 
import { Injector, APP_INITIALIZER } from '@angular/core'; 
import { TranslateService } from '@ngx-translate/core'; 
import { LOCATION_INITIALIZED } from '@angular/common'; 

export function HttpLoaderFactory(http: HttpClient) { 
    return new TranslateHttpLoader(http); 
} 


export function appInitializerFactory(translate: TranslateService, injector: Injector) { 
    return() => new Promise<any>((resolve: any) => { 
     const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null)); 
     locationInitialized.then(() => { 
      const langToSet = 'en' 
       translate.setDefaultLang('en'); 
      translate.use(langToSet).subscribe(() => { 
       console.info(`Successfully initialized '${langToSet}' language.'`); 
      }, err => { 
       console.error(`Problem with '${langToSet}' language initialization.'`); 
      },() => { 
       resolve(null); 
      }); 
     }); 
    }); 
} 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     PageNotFoundComponent, 
     HomePageComponent, 
     MsgPipe 
    ], 
    imports: [ 
     BrowserModule, 
     RouterModule.forRoot(appRoutes), 
     HttpClientModule, 
     TranslateModule.forRoot({ 
      loader: { 
       provide: TranslateLoader, 
       useFactory: HttpLoaderFactory, 
       deps: [HttpClient] 
      } 
     }), 
    ], 
    providers: [ 
     { 
      provide: APP_INITIALIZER, 
      useFactory: appInitializerFactory, 
      deps: [TranslateService, Injector], 
      multi: true 
     } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

（代碼以上取自here）

我的菸斗還沒有窩除非pure被設置爲false，否則會導致多次不必要的調用。沒有錯誤，它只是不會改變內容。

Answer 1

您沒有任何額外的翻譯庫。作爲一個例子，你只需要一個管道文件translation-pipe.ts文件和translation.provder.ts文件，你可以擴展任何你想要的。請檢查下面的文件

翻譯，pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 

import {TranslateProvider} from '../../providers/translate/translate'; 

@Pipe({ 
    name: 'translation', 
}) 
export class TranslationPipe implements PipeTransform { 

    constructor(private _translateService: TranslateProvider) { } 

    transform(value: string, ...args) { 
    return this._translateService.instant(value); 
    } 
} 

TranslateProvider.ts

import {Injectable} from '@angular/core'; 
import {LANG_EN_TRANS} from './languages/en'; 
import {LANG_TR_TRANS} from './languages/tr'; 

@Injectable() 
export class TranslateProvider { 

    private _currentLang: string; 
    // If you want to use dictionary from local resources 
    private _dictionary = { 
    'en': LANG_EN_TRANS, 
    'tr': LANG_TR_TRANS 
    }; 

    // inject our translations 
    constructor(private _db: DbProvider) { } 

    public get currentLang() { 
    if (this._currentLang !== null) { 
     return this._currentLang; 
    } else return 'en'; 
    } 

    public use(lang: string): void { 
    this._currentLang = lang; 
    } // set current language 

    // private perform translation 
    private translate(key: string): string { 

    // if u use local files 
    if (this._dictionary[this.currentLang] && this._dictionary[this.currentLang][key]) { 
     return this._dictionary[this.currentLang][key]; 
    } else { 
     return key; 
    } 

    // if u do not want local files then get a json file from database and add to dictionary 
    } 

    public instant(key: string) { return this.translate(key); } 
} 

這裏private translate()功能是改變當地的關鍵語言的主要功能。您可以導入本地文件，如en.ts，sp.ts，au.ts等，或者您可以修改此功能以連接數據庫並獲取鍵值對... 本地翻譯文件示例爲

zh .TS

export const LANG_EN_TRANS = { 
    'about': 'About', 
} 

或

tr.ts

export const LANG_TR_TRANS = { 
    'about': 'Hakkinda', 
} 

有一個很好的編碼...