使用 Angular 通用的 ngx-translate 在轉換參數化值時遇到問題

Question

我正在使用 Angular 通用將我的 Angular 10 應用程序遷移到 SSR，並且在轉換參數化值時遇到了 ngx-translate 的問題。

我有翻譯

Bei Kauf von {quantity} 

其中這個數量是我們組件的一個屬性，我們通常將其翻譯為{{ 'LABEL' | translate: {quantity: 1} }} {{ 'LABEL' | translate: {quantity: 1} }}我們將看到Bei Kauf von 1

但是對於 SSR，它根本沒有翻譯。 我在頁面上看到了Bei Kauf von {quantity} 。 我檢查了許多論壇，但沒有看到潛在的解決方案。 任何幫助將非常感激。

這是我的translate-server.loader.ts

    import { join } from 'path';
    import { Observable } from 'rxjs';
    import { TranslateLoader } from '@ngx-translate/core';
    import {
      makeStateKey,
      StateKey,
      TransferState
    } from '@angular/platform-browser';
    import * as fs from 'fs';
    
    export class TranslateServerLoader implements TranslateLoader {
      constructor(
        private transferState: TransferState,
        private prefix: string = 'i18n',
        private suffix: string = '.json'
      ) {}
    
      public getTranslation(lang: string): Observable<any> {
        return new Observable((observer) => {
          const assets_folder = join(
            process.cwd(),
            'dist',
            'my-app',
            'browser',
            'assets',
            this.prefix
          );
    
          const jsonData = JSON.parse(
            fs.readFileSync(`${assets_folder}/${lang}${this.suffix}`, 'utf8')
          );
    
          // Here we save the translations in the transfer-state
          const key: StateKey<number> = makeStateKey<number>(
            `transfer-translate-${lang}`
          );
          this.transferState.set(key, jsonData);
    
          observer.next(jsonData);
          observer.complete();
        });
      }
    }
    
    export function translateServerLoaderFactory(transferState: TransferState) {
      return new TranslateServerLoader(transferState);
    }

翻譯-browser.loader.ts

    import { Observable } from 'rxjs';
    import { TranslateLoader } from '@ngx-translate/core';
    
    import {
      makeStateKey,
      StateKey,
      TransferState
    } from '@angular/platform-browser';
    import { TranslateHttpLoader } from '@ngx-translate/http-loader';
    import { HttpClient } from '@angular/common/http';
    
    export class TranslateBrowserLoader implements TranslateLoader {
      constructor(private http: HttpClient, private transferState: TransferState) {}
    
      public getTranslation(lang: string): Observable<any> {
        const key: StateKey<number> = makeStateKey<number>(
          `transfer-translate-${lang}`
        );
        const data = this.transferState.get(key, null);
    
        // First we are looking for the translations in transfer-state,
        // if none found, http load as fallback
        if (data) {
          return new Observable((observer) => {
            observer.next(data);
            observer.complete();
          });
        } else {
          return new TranslateHttpLoader(this.http).getTranslation(lang);
        }
      }
    }
    
    export function translateBrowserLoaderFactory(
      httpClient: HttpClient,
      transferState: TransferState
    ) {
      return new TranslateBrowserLoader(httpClient, transferState);
    }

app.server.module.ts

    import { NgModule } from '@angular/core';
    import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
    import { FlexLayoutServerModule } from '@angular/flex-layout/server';
    import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
    import { translateServerLoaderFactory } from './shared/loaders/translate-server.loader';
    import { TransferState } from '@angular/platform-browser';
    
    import { AppModule } from './app.module';
    import { AppComponent } from './app.component';
    import { EnvironmentService } from '~shared/services/environment.service';
    
    @NgModule({
      imports: [
        AppModule,
        ServerModule,
        ServerTransferStateModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: translateServerLoaderFactory,
            deps: [TransferState]
          }
        }),
        FlexLayoutServerModule,
      ],
      providers: [EnvironmentService],
      bootstrap: [AppComponent],
    })
    export class AppServerModule {}

app.module.ts

    imports: [
    ....,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: translateBrowserLoaderFactory,
            deps: [HttpClient, TransferState]
          }
        }),
    ]

注意：它適用於在翻譯中沒有任何參數化值的所有其他人

Answer 1

它應該是雙大括號

Bei Kauf von {{quantity}}

Answer 2

想注意另外兩件事，如果它在 Angular 的最新版本中發生了變化，但不要忘記在 app.module 提供程序中注冊 TransferState

 providers: [
    TransferState,
    ...
]

和 translate-server.loader.ts 如果您有一些 node.js 使用的類型錯誤

/// <reference types="node" /> // add this line
import {join} from 'path';

在頂部。 如果沒有幫助，請嘗試添加

"types" : ["node", "express"],

到“compilerOptions”中的 tsconfig.json 我花了一些時間））