如何在Angular 6中使用Material Design

angular 多年来不断发展，每个版本都不断添加新的令人高兴的功能。其中一项改进是在 Material Design 中，它带有新的组件。本教程将介绍 Angular Material 以及如何将其合并到 Angular 6 项目中。

什么是材料设计？

Material Design 是谷歌于 2014 年开发的一种用于 Web 和移动应用程序的设计语言。Material Design 使开发人员可以轻松自定义其 UI，同时仍保持用户舒适的美观应用程序界面。使用 Material Design，您可以获得组织良好的格式以及表达您的品牌和风格的灵活性。

有关 Material Design 的示例，请查看 Houzz，这是一款在 2016 年获得 Google Play 大奖的家居设计应用程序。该应用程序利用 Material Design 将其许多功能融入有限的移动设备空间。这通过让用户查看和导航应用程序而不会感到不知所措，从而为用户提供了良好的体验。它确实是最好的材料设计应用程序之一。

如何在Angular 6中使用Material Design 第1张

这篇文章不是关于材料设计的，所以我们不会详细介绍。如果您想了解更多信息，Envato 博客上有一篇很棒的 Material Design 教程。

角材料简介

Angular Material 由一套预先构建的 Angular 组件组成。与 Bootstrap 不同，它为您提供了您可以随心所欲地设置样式的组件，Angular Material 致力于提供增强且一致的用户体验。同时，它使您能够控制不同组件的行为方式。

就像 Angular 一样，Angular Material 自最初发布以来已经发展了很多，并进行了很大的改进和错误修复。

如何在Angular 6中使用Material Design 第2张

如何将 Angular 材质添加到您的项目中

为了将 Angular Material 添加到项目中，我们将使用ng add 用于向 Angular 项目添加新功能的命令。这个命令恰好是 Angular 6 中的一个新特性，它很简单：

ng add @angular/material

此命令会将库添加到现有项目并在angular.json中引入主题css。它还将在index.html中添加脚本并更新 .AppModule

Angular 6 的另一个特性是ng update，它会在新版本发布时更新 npm 依赖项。它还会更新您的 RxJS 代码和 Material Design 代码以利用新的api。

依赖项和组件

Angular 材料由几个设计组件组成，它们属于以下类别：

表单控件
按钮和指示灯
导航和布局
弹出窗口和模式
数据表

ng update 您可以使用该命令生成启动器组件。通过此命令可用的一些原理图是：

导航
仪表盘
桌子

这些原理图可以使用以下命令轻松安装ng generate ：

ng generate @angular/material:material-table --name <component-name>：生成一个用数据表显示数据的组件
ng generate @angular/material:material-nav --name <component-name>：生成带有侧边导航和工具栏的组件
ng generate @angular/material:material-dashboard --name <component-name>：生成一个包含卡片动态网格列表的组件。

构建 Angular 6 材质应用程序

要开始使用，您将需要 Angular CLI。如果您没有安装 Angular CLI，只需发出以下命令即可安装它。

npm install -g @angular/cli

接下来，我们需要初始化一个新的 Angular 项目。为此，发出以下命令， Material-ng 我们的 Angular 项目的名称在哪里。

ng new Material-ng

此命令为您的项目创建几个 Angular 模板文件并安装必要的启动器依赖项。

进入项目目录并将 Angular Material 添加到项目中。

cd MaterialApp
ng add @angular/material

接下来，我们将添加许多应用程序共有的一些组件，例如导航。

添加导航栏

要添加导航栏，只需发出：

ng generate @angular/material:material-nav --name myNav

此命令添加一个可折叠的侧面导航和抽屉组件。您应该得到以下输出，其中为我们生成了四个文件，即 my-nav.component.css、my-nav.component.html、my-nav.component.spec.ts和my-nav.component.ts .

CREATE src/app/my-nav/my-nav.component.css (129 bytes)
CREATE src/app/my-nav/my-nav.component.html (958 bytes)
CREATE src/app/my-nav/my-nav.component.spec.ts (699 bytes)
CREATE src/app/my-nav/my-nav.component.ts (580 bytes)
UPDATE src/app/app.module.ts (795 bytes)

现在打开my-nav.component.html ，您应该会看到为我们生成的导航的所有 HTML 代码。

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Material-ng</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

默认情况下，初始 Angular 项目将提供默认页面，但我们希望能够看到 Material Design 的魔力！为了使用我们生成的 Material Design 导航组件，打开 app.component.html 并将所有代码替换为：

<my-nav></my-nav>

现在，当您运行该应用程序时，您将看到导航栏。

您还应该注意到我们添加的导航组件已导入到主模块中，如下所示：

#app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { MyNavComponent } from './my-nav/my-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    MyNavComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 my-nav.component.html中，让我们也对菜单列表进行一些更改：

<mat-toolbar color="primary">Home</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Form controls</a>
      <a mat-list-item href="#">Navigation</a>
      <a mat-list-item href="#">Layout</a>
      <a mat-list-item href="#">Buttons and Indicators</a>
      <a mat-list-item href="#">Popups & Modals</a>
      <a mat-list-item href="#">data table</a>
    </mat-nav-list>

现在，您可以通过运行以下命令启动开发服务器：