如何在Angular独立组件中全局引入ngx-translate的TranslatePipe

问题背景 #

基于app.config的Angular独立组件项目，已通过TranslationModule完成ngx-translate的全局语言初始化配置，但目前每个组件必须手动导入TranslatePipe才能使用| translate翻译管道，希望实现管道全局可用，无需重复导入。

解决方案 #

在Angular独立组件模式下，可通过providePipes API全局注册TranslatePipe，步骤如下：

1. 导入providePipes和TranslatePipe到app.config.ts
2. 将providePipes([TranslatePipe])添加到应用配置的providers数组中

修改后的app.config.ts #

import { ApplicationConfig, provideZoneChangeDetection, providePipes } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { TranslatePipe } from '@ngx-translate/core';
import { routes } from './app.routes';
import { TranslationModule } from './translation.module';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    importProvidersFrom(TranslationModule),
    // 全局注册TranslatePipe，所有组件无需手动导入即可使用
    providePipes([TranslatePipe])
  ]
};

简化后的app.component.ts（无需导入TranslatePipe） #

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
}

说明 #

providePipes是Angular独立组件模式下用于注册全局管道的API，注册后所有组件模板可直接使用| translate管道，无需在组件的imports数组中重复导入TranslatePipe。原有的TranslationModule配置保持不变，仍负责ngx-translate的全局初始化和服务配置。

内容的提问来源于stack exchange，提问作者Riccardo