Angular5项目中如何结合ngx-translate配置Kendo组件国际化？

嘿，这事儿我熟！既然你已经搞定了ngx-translate的基础国际化，又装了@progress/kendo-angular-messages，接下来几步就能让Kendo组件用上对应的本地化资源：

首先，在你的根模块（比如AppModule）里，导入Kendo的国际化相关模块，以及你需要的语言消息包。比如要设置中文（zh-CN），代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClient } from '@angular/common/http';

// ngx-translate 相关导入
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// Kendo 本地化核心模块
import { LocalizationService, CldrIntlService, IntlModule } from '@progress/kendo-angular-intl';
// 导入中文本地化消息包（换成你需要的语言即可）
import { messages as zhCnMessages } from '@progress/kendo-angular-messages/dist/cldr/messages/zh-CN';

接下来，在模块的providers数组里配置LocalizationService，把导入的消息包注入进去，同时可以同步配置Angular的LOCALE_ID来保持全局区域设置一致：

// 配置ngx-translate的HTTP加载器（如果之前没配置过）
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    IntlModule, // 必须导入！LocalizationService依赖它
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      provide: LocalizationService,
      useFactory: (intlService: CldrIntlService) => {
        const localizationService = new LocalizationService(intlService);
        // 给Kendo组件设置中文消息
        localizationService.setMessages(zhCnMessages);
        return localizationService;
      },
      deps: [CldrIntlService]
    },
    // 同步Angular的区域设置为中文（可选，但建议配置）
    { provide: LOCALE_ID, useValue: 'zh-CN' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果你的应用需要支持运行时切换语言，那可以在根组件里监听ngx-translate的语言变化事件，同步更新Kendo的本地化消息：

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LocalizationService } from '@progress/kendo-angular-intl';
// 导入需要的多语言消息包
import { messages as enUsMessages } from '@progress/kendo-angular-messages/dist/cldr/messages/en-US';
import { messages as zhCnMessages } from '@progress/kendo-angular-messages/dist/cldr/messages/zh-CN';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(
    private translate: TranslateService,
    private localizationService: LocalizationService
  ) {
    // 设置默认语言
    translate.setDefaultLang('en');
  }

  ngOnInit() {
    // 监听语言切换事件，同步更新Kendo组件的消息
    this.translate.onLangChange.subscribe((event) => {
      switch (event.lang) {
        case 'zh-CN':
          this.localizationService.setMessages(zhCnMessages);
          break;
        case 'en':
        default:
          this.localizationService.setMessages(enUsMessages);
          break;
      }
    });
  }

  // 供页面调用的切换语言方法
  switchLanguage(lang: string) {
    this.translate.use(lang);
  }
}

• 消息包路径：Angular5对应的Kendo版本，消息包路径是@progress/kendo-angular-messages/dist/cldr/messages/[语言代码]，如果是新版本Kendo，路径可能简化为@progress/kendo-angular-messages/messages/[语言代码]，注意适配你的版本。
• 必须导入IntlModule：LocalizationService依赖它提供的国际化基础能力，漏掉会导致报错。
• 验证效果：配置完成后，打开使用Kendo组件的页面，比如日期选择器、图表的tooltip、分页组件的文字等，应该会显示对应的本地化内容了。

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