角料不起作用的徽章

Question

我将角度材料升级到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>

但徽章没有显示,只是简单的文字.

为什么？当然我导入角度材料模块,我使用mat-button和角材料的其他组件.

我创建了stackblitz.

Answer 1

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

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

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

此外,您将需要导入的主题风格angular/material在styles.css.

styles.css的

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

查看固定演示.