Блог

Главная - Вопросы по программированию - Значки панели инструментов Angular Matarial не отформатированы

Значки панели инструментов Angular Matarial не отформатированы

#angular #angular-material

Вопрос:

Я добавил @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>

Но результат сейчас выглядит неправильным. Кто — нибудь знает, почему кнопки отображаются в неправильном формате?

Странно выглядящая панель инструментов

Комментарии:

1. Вы повторно обслуживали приложение, так как @angular/material редактировали свой angular.json файл, чтобы добавить стили материалов ? Просто попробуйте повторно запустить свое приложение.

2. Я думаю , что вы пропали MatButtonModule без вести, так как вы ссылаетесь на это: <button mat-button>

Ответ №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 { }
Метки: