Angular Mat徽章显示内部按钮,而不是右上角
我试着用棱角材料制作的徽章。我有一堆导航按钮,我想把它们放在上面,但它只是把数字放在按钮里面,而不是一个小圆圈,数字在按钮的右上角,如示例所示: 下面是我的照片: HTML: 我已经考虑了所有的选择。数量不多,也不会改变任何事情。我确实已将MatBadgeModule导入到我的app.material.module.ts文件中。这是我所有其他材料模块的位置,它们工作良好。我做了与示例完全相同的操作,但它不起作用 如果是依赖性问题,下面是我的package.json:Angular Mat徽章显示内部按钮,而不是右上角,angular,angular-material,badge,Angular,Angular Material,Badge,我试着用棱角材料制作的徽章。我有一堆导航按钮,我想把它们放在上面,但它只是把数字放在按钮里面,而不是一个小圆圈,数字在按钮的右上角,如示例所示: 下面是我的照片: HTML: 我已经考虑了所有的选择。数量不多,也不会改变任何事情。我确实已将MatBadgeModule导入到我的app.material.module.ts文件中。这是我所有其他材料模块的位置,它们工作良好。我做了与示例完全相同的操作,但它不起作用 如果是依赖性问题,下面是我的package.json: { "name": "
{
"name": "PURE",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4201",
"start.vs2017": "webpack-dev-server --port=4201 --config ./webpack.vs.config.js",
"start.aot.vs2017": "webpack-dev-server --port=4201 --aot --config ./webpack.vs.config.js",
"build": "webpack",
"build.aot": "webpack --config ./webpack.aot.config.js",
"build.vs2017": "webpack --config ./webpack.vs.config.js",
"build.aot.vs2017": "webpack --config ./webpack.vsaot.config.js",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
},
"private": true,
"dependencies": {
"@angular/animations": "6.0.0",
"@angular/common": "6.0.0",
"@angular/compiler": "6.0.0",
"@angular/core": "6.0.0",
"@angular/forms": "6.0.0",
"@angular/http": "6.0.0",
"@angular/router": "6.0.0",
"@angular/platform-browser": "6.0.0",
"@angular/platform-browser-dynamic": "6.0.0",
"@angular/flex-layout": "6.0.0-beta.17",
"@angular/material": "6.0.0",
"@angular/cdk": "6.0.0",
"core-js": "^2.4.1",
"file-saver": "1.3.3",
"moment": "2.22.2",
"ng2-webstorage": "2.0.0",
"rxjs": "6.0.0",
"web-animations-js": "2.2.5",
"zone.js": "^0.8.12"
},
"devDependencies": {
"@angular/cli": "1.6.5",
"@angular/compiler-cli": "5.2.5",
"@angular/language-service": "5.1.2",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"autoprefixer": "^6.5.3",
"codelyzer": "4.1.0",
"css-loader": "^0.28.1",
"cssnano": "^3.10.0",
"exports-loader": "^0.6.3",
"file-loader": "1.1.6",
"istanbul-instrumenter-loader": "3.0.0",
"jasmine-core": "2.99.1",
"jasmine-spec-reporter": "4.2.1",
"json-loader": "^0.5.4",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"less-loader": "^4.0.2",
"postcss-loader": "^1.3.3",
"postcss-url": "^5.1.2",
"protractor": "~5.1.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"script-loader": "^0.7.0",
"source-map-loader": "^0.2.0",
"string-replace-webpack-plugin": "0.1.3",
"style-loader": "^0.13.1",
"stylus-loader": "^3.0.1",
"ts-node": "3.2.0",
"tslint": "5.9.1",
"typescript": "2.5.3",
"url-loader": "0.6.2",
"webpack": "3.11.0",
"webpack-dev-server": "2.11.1"
},
"-vs-binding": {
"ProjectOpened": [
"start.vs2017"
]
}
}
根据您的代码检查此StackBlitz: HTML文件:
<div fxLayout="column" fxLayoutAlign="start stretch">
<button
mat-raised-button
type="button"
matBadge="8"
*ngFor="let item of items"
[color]="item.Active ? 'accent' : null"
fxLayout="row"
fxLayoutAlign="space-between center"
(click)="doSomething()">
<mat-icon *ngIf="item.MenuIcon">{{item.MenuIcon}}</mat-icon>
<span>{{item.MenuText}}</span>
</button>
</div>
CSS文件:
:host {
display: block;
background-color: #e0e0e0;
height: 100%;
}
button {
margin: 5px;
}
button mat-icon {
margin-right: 10px;
}
div {
background-color: #e0e0e0;
}
app.module.ts文件:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatBadgeModule} from '@angular/material/badge';
import {FormsModule} from '@angular/forms';
imports: [
BrowserModule, FormsModule, BrowserAnimationsModule,
MatButtonModule, MatIconModule, MatBadgeModule ]
style.css文件:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
我认为这是您缺少的部分,为棱角材质添加样式(这是必需的)。请显示您使用的样式代码。我明白您的意思。我在我的应用程序中有一个样式主题,它不是一个预先构建的主题,因为我将我的材质模块从5更新到6,所以它没有用于徽章的css。我必须从我的scss文件中重新生成css。非常感谢。
:host {
display: block;
background-color: #e0e0e0;
height: 100%;
}
button {
margin: 5px;
}
button mat-icon {
margin-right: 10px;
}
div {
background-color: #e0e0e0;
}
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatBadgeModule} from '@angular/material/badge';
import {FormsModule} from '@angular/forms';
imports: [
BrowserModule, FormsModule, BrowserAnimationsModule,
MatButtonModule, MatIconModule, MatBadgeModule ]
@import "~@angular/material/prebuilt-themes/indigo-pink.css";