angular - Angular Matarial 工具栏图标未格式化

Question

我@angular/material通过添加到 ng 应用程序ng add @angular/material。然后我导入了我的模块，app.modules.ts如您在此处看到的：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProductListComponent } from './product-list/product-list.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NoopAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我AppComponent的工具栏中，我从 material.angular.io 复制了这段代码：

<mat-sidenav-container>
  <mat-sidenav>
    Test
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <button mat-button>
        <mat-icon>menu</mat-icon>
      </button>
      <span>My App</span>
      
    </mat-toolbar>
    
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

但现在的结果看起来不对。有谁知道为什么按钮显示格式错误？

标签： angularangular-material

Answer 1

您需要添加MatButtonModule到您的导入列表中AppModule。

应该是这样的：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProductListComponent } from './product-list/product-list.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { HomeComponent } from './home/home.component';

/* Added this import */
import { MatButtonModule } from '@angular/material/button';


@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NoopAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,

    /* Added this import */
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }