0
私はアングル4とマテリアルデザインで演奏しています。 md-icon-buttonを使用することで困難に直面しないでください。私はこの灰色のかさばった "古典的な"ボタンなしで[チェック]アイコンだけを持っていることを望んでいました。不思議なアイコンは、メニュー項目に対して完全に機能します。単純なものでなければなりませんが、その理由を見つけることはできません。md-icon-buttonが正しくレンダリングされていません
main.htmlと：
<div class="menuBar" style="margin-left: 5px">
<button md-icon-button [mdMenuTriggerFor]="menu">
<md-icon>check</md-icon>
</button>
</div>
<md-menu #menu="mdMenu">
<button md-menu-item>
<md-icon>voicemail</md-icon>
<span>Add album</span>
</button>
</md-menu>
<div class="container">
<md-grid-list cols="4" rowHeight="100px" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile (click)="clickedOnTile(tile.text)"
*ngFor="let tile of tiles"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.color">
{{tile.text}}
</md-grid-tile>
</md-grid-list>
</div>
main.grid.ts：
import {Component} from "@angular/core";
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import {Album} from "../album/album";
@Component({
templateUrl: './main.html',
selector: 'album-grid',
})
export class MainGrid {
constructor(public dialog: MdDialog) {
}
tiles = [
{text: 'One', cols: 3, rows: 1, color: 'lightblue'},
{text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
{text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
{text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
];
clickedOnTile(item: String): void {
console.log('has been cliecked: ' + item)
let tile = this.dialog.open(Album, {
data: {name: item}
})
}
}
ボイスメール用のアイコンが正しくレンダリングされている：
しかし、メニューの1 [確認]は次のようになります：
私が追加しました：
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
のstyle.cssに
マイapp.module：
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AlbumService} from "./service/album.service";
import {AlbumUtils} from "./service/album.utils";
import {MainGrid} from "./grid/main.grid";
import {HttpModule} from "@angular/http";
import {AppRoutingModule} from "./app-routing.module";
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdDialogModule, MdGridListModule, MdMenuModule,MdIconModule,MdIconRegistry} from '@angular/material';
import {Album} from "./album/album";
import {NgbCarouselModule, NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
AppComponent,
MainGrid,
Album
],
imports: [
AppRoutingModule,
BrowserModule,
HttpModule,
BrowserModule,
BrowserAnimationsModule,
MdGridListModule,
MdDialogModule,
MdMenuModule,
MdIconModule,
NgbModule.forRoot()
],
entryComponents:[Album],
providers: [AlbumService, AlbumUtils,MdIconRegistry],
bootstrap: [AppComponent]
})
export class AppModule {
}
package.json：
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/flex-layout": "^2.0.0-beta.9",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3",
"bootstrap": "^4.0.0-alpha.5",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
}