Angular ngx 全局翻译

Question

我确实有一个简单的问题——如果我们不必每次都导入 TranslateModule 不是很好吗？我想知道是否还有其他方法可以通过新的 Angular 独立版本使其全球化。感谢任何见解！

我一直在尝试在最新版本的 Angular 中全局实现 Translate Pipe，但遇到了一些障碍！我很高兴让我的应用程序支持多种语言，但我似乎无法让它工作。我已按照步骤操作并查看了文档，但有些东西没有点击。如果有人有提示或可以指出我正确的方向，我将非常感激！谢谢！

Answer 1

如果您使用非独立方法，则不会出现此问题。

为了让你的工作更轻松，你可以创建一个模块，其中包含所有独立组件之间共享的所有组件/指令/管道，确保你导出后，否则导入该模块的人将看不到它。

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [
    ...
    TranslateModule,
    ...
  ],
  exports: [
    ...
    TranslateModule,
    ...
  ],
  providers: [],
})
export class SharedModule {}

您的所有组件都必须导入

SharedModule

。

@Component({
  selector: 'app-root',
  imports: [SharedModule],
  standalone: true,
  template: `
    <div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}
        <select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>
      </label>
    </div>
  `,
})
export class AppComponent {
  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }
}