Angular 4中ngx-bootstrap日期选择器改pt-br语言配置无效求助

别着急，我帮你排查下可能的问题点，按步骤调整应该就能解决：

1. 先确认ngx-bootstrap版本兼容性 #

Angular 4只兼容ngx-bootstrap的2.x版本，如果你装的是更高版本（比如3+），会出现各种奇怪的适配问题。先检查下package.json里的版本，要是不对的话，重新安装适配版本：

npm uninstall ngx-bootstrap
npm install ngx-bootstrap@2.0.5 --save

2. 正确导入并配置语言包 #

在app.module.ts里，你需要导入语言定义服务和对应的中文语言包，还要在模块里注册服务并完成初始化：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BsDatepickerModule, BsLocaleService } from 'ngx-bootstrap/datepicker';
// 导入中文语言包（ngx-bootstrap 2.x的路径是这样的）
import { defineLocale } from 'ngx-bootstrap/chronos';
import { zhCnLocale } from 'ngx-bootstrap/locale';

// 先注册中文语言包
defineLocale('zh-cn', zhCnLocale);

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, BsDatepickerModule.forRoot()],
  declarations: [AppComponent],
  providers: [BsLocaleService], // 注册语言服务
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private localeService: BsLocaleService) {
    // 设置全局默认语言为中文
    this.localeService.use('zh-cn');
  }
}

3. 页面组件的正确调用 #

如果是在懒加载的页面模块里使用日期选择器，别忘了在对应模块里也导入BsDatepickerModule，不然组件无法获取到全局的国际化配置：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { YourDatePickerComponent } from './your-date-picker.component';

@NgModule({
  imports: [CommonModule, BsDatepickerModule],
  declarations: [YourDatePickerComponent]
})
export class YourDateModule { }

常见错误点排查 #

• 是不是只导入了语言包，但没调用defineLocale注册，也没通过BsLocaleService.use()设置默认语言？这是最容易遗漏的核心步骤
• 是不是懒加载模块里没导入BsDatepickerModule？导致组件无法加载到国际化配置
• 语言包路径是不是错了？ngx-bootstrap 2.x的语言包路径是ngx-bootstrap/locale，高版本路径不同，但Angular 4必须用2.x版本

按照上面的步骤调整后，应该就能看到中文的日期选择器啦。

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