Блог

Главная - Вопросы по программированию - Компонент Angular material при добавлении в пустое приложение angular выглядит иначе, чем в примере

Компонент Angular material при добавлении в пустое приложение angular выглядит иначе, чем в примере

#css #angular #sass #angular-material

#css #angular #sass #angular-material

Вопрос:

Я добавил компонент Angular Material «Toolbar» в свой проект, и он выглядит не так, как в примере, хотя, насколько я могу судить, все стили одинаковы.

Вот как это выглядит в примере с веб-сайта проекта.

введите описание изображения здесь

В целях отладки я создал пустое угловое приложение и добавил Angular Material и только компонент панели инструментов, и это выглядит так, как в моем реальном проекте, который выглядит следующим образом. Отладка приложения Angular здесь

введите описание изображения здесь

Это пример html и css, который работает так, как я хочу: я скопировал его в stackblitz здесь

index.html

 <link href="https://fonts.googleapis.com/icon?family=Material Iconsamp;display=block" rel="stylesheet">
<div class="mat-app-background basic-container">
  <toolbar-basic-example>loading</toolbar-basic-example>
</div>
<span class="version-info">Current build: 10.2.0</span>

компонент html

 <mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

style.scss

 @import '~@angular/material/prebuilt-themes/indigo-pink.css';

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
.basic-container {
  padding: 30px;
}

компонент css

 .example-spacer {
  flex: 1 1 auto;
}

Вот мое приложение для отладки angular, которое я хочу, чтобы оно выглядело так же, как в примере, и скопировано в stackblitz здесь

index.html

 <!doctype html>
<html lang="en">
<head>
 <link href="https://fonts.googleapis.com/icon?family=Material Iconsamp;display=block" rel="stylesheet">
</head>
<body class="mat-typography">
  <div class="mat-app-background basic-container">    
  <app-root></app-root>
  </div>
</body>
</html>

компонент html

 <mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

styles.scss

 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
.basic-container {
  padding: 30px;
}

компонент scss

 .example-spacer {
  flex: 1 1 auto;
}

Почему мое приложение angular не похоже на пример с веб-сайта Angular Material и как я могу исправить это, чтобы оно выглядело так.

Ответ №1:

Вы не импортируете, MatButtonModule поэтому mat-icon-button директива ничего не делает.

Вот обновленный app.module.ts с импортом

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatIconModule,

    // you were missing this
    MatButtonModule,

    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Рабочий stackblitz:https://stackblitz.com/edit/github-9eywwc-xsjtpo?file=src/app/app.module.ts