angular - 有 Angular Material 的徽章不起作用

Question

我将 Angular Material 升级到 6.0.2，我想使用 badge 功能，但它没有显示在我的页面中。包配置如下所示:

{
    "name": "my.angular",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^6.0.2",
        "@angular/cdk": "^6.0.2",
        "@angular/common": "^6.0.2",
        "@angular/compiler": "^6.0.2",
        "@angular/core": "^6.0.2",
        "@angular/flex-layout": "^5.0.0-beta.14",
        "@angular/forms": "^6.0.2",
        "@angular/http": "^6.0.2",
        "@angular/material": "^6.0.2",
        "@angular/platform-browser": "^6.0.2",
        "@angular/platform-browser-dynamic": "^6.0.2",
        "@angular/router": "^6.0.2",
        "core-js": "^2.4.1",
        "hammerjs": "^2.0.8",
        "ngx-cookie-service": "^1.0.10",
        "rxjs": "^6.1.0",
        "rxjs-compat": "^6.1.0",
        "zone.js": "^0.8.19"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.6.3",
        "@angular/cli": "^6.0.2",
        "@angular/compiler-cli": "^6.0.2",
        "@angular/language-service": "^6.0.2",
        "@types/jasmine": "~2.8.3",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "^4.0.1",
        "jasmine-core": "~2.8.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~2.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~4.1.0",
        "tslint": "~5.9.1",
        "typescript": "^2.7.2"
    }
}

然后我写道:

<span matBadge="4" matBadgeOverlap="false">Text with a badge</span>

但是没有显示徽章，只有简单的文字。

为什么？当然，我导入了 Angular Material 模块，我使用了 mat-button 和 Angular Material 中的其他组件。

我创建了 stackblitz .

Answer 1

您需要导入 MatBadgeModule 才能使用它。

import {
  ...
  MatBadgeModule,
  ...
} from '@angular/material';

@NgModule({
  exports: [
    ...
    MatBadgeModule,
    ...
  ]
})
export class MaterialModule { }

此外，您还需要在styles.css中导入angular/material的主题样式。

样式.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

参见固定 demo .