Transloco 未在 Angular 17 中加载翻译

Question

这是一个最小的复制品：link

我正在将 Angular (17) 与 Transloco 结合使用。 按照文档中的说明进行操作后，我尝试使用模板内的结构指令来翻译简单的文本

<ng-container *transloco="let t"> <h2>{{ t('greeting') }}</h2> </ng-container>

问题是，如您所见，根本没有渲染任何文本。

我尝试对翻译文件使用相对路径和绝对路径，并且还注意到网络选项卡中没有 Http 调用，这表明未获取翻译。

既然这应该是直截了当的，我觉得我错过了一些东西。

Answer 1

代码存在的问题如下。

1. 由于我们使用的是

   *transloco

   结构指令，因此需要将 import

   TranslocoDirective

   添加到独立组件的导入数组中！

2. 在

   angular.json

   文件中我们需要引用assets文件夹，以便我们在查找翻译文件时能够解析它们

角度.json

...
"options": {
    "assets": ["src/assets"],
    ...

完整代码

import { Component, inject, isDevMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { provideHttpClient } from '@angular/common/http';
import { TranslocoHttpLoader } from './transloco-loader';
import {
  TranslocoService,
  provideTransloco,
  TranslocoDirective,
} from '@jsverse/transloco';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TranslocoDirective],
  template: `
    <ng-container *transloco="let t">
      <h2>{{ t('greeting') }}</h2>
    </ng-container>
    <button (click)="onChangeToSpanish()">Change to Spanish</button>
  `,
})
export class App {
  private translocoService = inject(TranslocoService);

  onChangeToSpanish() {
    this.translocoService.setActiveLang('es');
  }
}

bootstrapApplication(App, {
  providers: [
    provideHttpClient(),
    provideTransloco({
      config: {
        availableLangs: ['en', 'es'],
        defaultLang: 'en',
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: !isDevMode(),
      },
      loader: TranslocoHttpLoader,
    }),
  ],
});

Stackblitz 演示