开始使用 Angular Material 设置 添加内容

2025-06-07

Angular Material 入门

设置

添加内容

本教程将概述如何开始使用Angular Material ，这是一个在Angular中实现Material Design的 UI 组件库。我们将介绍如何设置一个 Angular 应用程序来使用 Angular Material ，并创建内容来演示 Material 组件，如下所示。

本教程的完整代码在我的 GitHub 上。每次提交都对应本文的一个步骤。https
://github.com/melissahoughton/angular-material-blog

Angular Material 组件示例

设置

生成应用程序

生成一个新的 Angular 应用程序并添加 Angular Material。

  1. 使用 Angular CLI 生成新的 Angular 应用

    ng new my-app在命令行中运行，替换my-app为应用程序的名称。

    选择Y路由。

    选择SCSS样式。

  2. 添加角度材质

    运行以下命令

    cd my-app
ng add @angular/material

    选择所提供的任何预建主题。

    选择Y全局排版（字体样式）。

    选择Y动画。

    该add命令将安装@angular/cdk库@angular/material并设置材质字体、图标和基本样式。

删除默认设置

当前内容在第一步中由 Angular 自动生成，但我们想要创建自己的内容。

删除app.component.html除 之外的所有内容<router-outlet></router-outlet>。

创建材质模块

要在应用中使用 Material 组件，我们需要导入它们。创建一个单独的文件material.module.ts来导入各个组件，下一步，我们将 Material 模块导入到应用中。

虽然不建议，但可以将材料组件直接导入到app.module.ts文件中。

我们将导入所有可用的 Angular Material 组件，以便在应用中使用。您可以稍后简化此文件，仅导入所需的组件。

  1. 创建一个名为 的文件material夹src\app。

  2. 创建一个名为 的文件material.module.ts，并将以下内容复制到该文件中。或者从我的GitHub复制这个材料模块文件到该文件夹​​中。

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MaterialModule { }
Enter fullscreen mode Exit fullscreen mode

该文件导入所有可用的材料组件，并将它们作为导出MaterialModule添加到应用程序中。

导入材质模块

在 中app.module.ts，向上一步创建的材料模块添加导入语句。

添加MaterialModule到导入数组AppModule以将其导入应用程序。

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 { MaterialModule } from './material/material.module';

@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  BrowserAnimationsModule,
  MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

该应用现已准备好使用 Angular Material。继续下一步，将内容添加到应用中，以演示 Material 组件。

添加内容

创建组件

  1. 使用 Angular CLI 生成组件

    跑步ng generate component home

  2. 设置路线

    app.routing.module.ts用以下方式替换空路线

    const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

这些步骤创建了一个名为的组件Home并将其设置为基础页面。

运行ng serve编译应用程序并查看文本home works!

添加基本​​样式

添加基本​​样式以在页面上创建间距。
我们将使用CSS FlexBox。Angular
还提供了一个强大的 Flex-Layout API @angular/flex-layout，它结合了 CSS FlexBox 和 mediaQuery。

  1. 添加材质背景样式。在body 标签中index.html添加 class 。mat-app-background

  2. 将标签包裹<router-outlet></router-outlet>在div一个类中container

  3. 添加以下样式app.component.scss

    .container {
  max-width: 800px;
  margin: 4em auto;
  padding: 0 20px;
}

.container > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

  4. 添加以下样式home.component.scss

    .flex-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 16px;
}

button {
  margin: 8px;
}

.mat-radio-button~.mat-radio-button {
  margin-left: 16px;
}

创建标题工具栏

在app.component.html容器 div 上方添加一个工具栏作为我们的应用程序标题

<mat-toolbar class="mat-elevation-z6" color="primary"></mat-toolbar>
Enter fullscreen mode Exit fullscreen mode

运行ng-serve并打开浏览器即可查看应用程序顶部的标题。

现在，我们已经添加了第一个 Angular Material 组件。组件的样式基于主题进行设置。
我们使用属性将栏设置为主题的主色color。
材质elevation类添加了阴影，以创建纹理材质外观。

添加 Angular Material 组件

将 的内容替换home.component.html为以下代码，其中包含一个 Material 组件的示例。刷新浏览器即可查看 Angular Material 组件的实际效果。

<h1 class="mat-display-1">Easy, Breezy, Beautiful: Angular Material</h1>

<p>Here are some random angular material components</p>

<mat-card>
    <mat-card-header>
        <img mat-card-avatar src="https://cdn.pixabay.com/photo/2018/10/11/12/31/black-cat-3739702_1280.jpg"
            alt="My Photos">
        <mat-card-title>Easy, Breezy, Beautiful</mat-card-title>
        <mat-card-subtitle>Angular Material</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>
            This is an amazing blog on Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
        </p>
    </mat-card-content>
    <mat-card-actions align="end">
        <button mat-raised-button color="primary">Read More</button>
    </mat-card-actions>
</mat-card>

<div class="flex-container">
    <div>
        <button mat-raised-button color="primary">Raised Primary</button>
        <button mat-raised-button color="accent">Raised Accent</button>
        <button mat-stroked-button>Basic Stroked</button>
        <button mat-stroked-button color="primary">Stroked Primary</button>
    </div>

    <button mat-fab>
        <mat-icon>thumb_up</mat-icon>
    </button>

    <mat-radio-group aria-label="Select an option">
        <mat-radio-button value="1">Option 1</mat-radio-button>
        <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>

    <mat-checkbox>Check me!</mat-checkbox>

    <mat-form-field>
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-slider></mat-slider>


    <button mat-flat-button color="primary" matTooltip="Info about the action" matTooltipPosition="after"
        aria-label="Button that displays a tooltip when focused or hovered over">
        Tooltip
    </button>
</div>

<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
Enter fullscreen mode Exit fullscreen mode

恭喜！您现在拥有一个使用 Angular Material 的 Angular 应用。

查看 Angular Material文档以了解全套组件及其使用方法。

文章来源：https://dev.to/melissahoughton/getting-started-with-angular-material-3ef2
Devto 翻译
PREV
为什么所有开发人员都应该学习如何执行基本的网络故障排除
NEXT
我被问到的常见前端面试问题