Angular Material 6.0.2中matBadge组件无法显示问题求助

你已经把Angular Material相关依赖都升级到了匹配的6.0.2版本，而且其他组件（比如mat-button）能正常工作，那matBadge不显示的核心原因大概率是你没有在模块中导入MatBadgeModule。

Angular Material 6.x版本采用了组件模块化拆分的设计，每个UI组件都对应独立的模块——比如MatButtonModule对应按钮组件，MatBadgeModule就是徽章功能对应的专属模块。你能正常使用mat-button说明已经导入了对应模块，但徽章组件的模块被遗漏了。

具体解决步骤： #

1. 打开你的根模块文件（通常是app.module.ts）
2. 导入MatBadgeModule：

import { MatBadgeModule } from '@angular/material/badge';

3. 在@NgModule的imports数组中添加这个模块：

@NgModule({
  imports: [
    // 保留你已有的其他导入模块
    MatBadgeModule
  ],
  // ...其他模块配置
})

完成以上操作后刷新页面，你写的<span matBadge="4" matBadgeOverlap="false">Text with a badge</span>就能正常显示徽章了。

另外检查了你的package.json配置，@angular/material和@angular/cdk版本完全匹配，依赖层面没有问题，不需要调整版本。

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