【Angular】使用Angular Material可以轻松将Material Design引入到Web应用中

简述

这是关于在Angular应用中引入Angular Material的备忘录。

前提 tí)

• Angular Material： v15.0.3

Angular： v15.0.0

Angular Material 是什么

Angular Material（Angular材料）是用于在Angular应用程序中引入“材料设计”的官方库。

「材料設計」是什麼意思？

安装软件包

在Angular项目的根目录下，执行以下命令。

ng add @angular/material

在对话形式中，要求您就各种设置进行提问（以下回答仅为示例，请根据您自己的需要做适当调整）。

# パッケージを導入して良いか改めて確認
The package @angular/material@15.0.3 will be installed and executed.
Would you like to proceed? (Y/n) 
  # -> Y を入力して Enter キー

# アプリ全体のカラーテーマをどうするか選ぶ
? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ] 
  Custom 
  # -> 好きなカラーセットを選択して Enter キー


# 文字の強調表示の設定をグローバルにするかどうかを確認
? Set up global Angular Material typography styles? (y/N) 
  # -> y を入力して Enter キー

# アニメーションモジュールを含めるか選択
? Include the Angular animations module? (Use arrow keys)
❯ Include and enable animations 
  Include, but disable animations 
  Do not include 
  # -> 「含める」を選択して Enter キー

# 以下の表示がされれば導入完了
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (502 bytes)
UPDATE angular.json (3073 bytes)
UPDATE src/index.html (585 bytes)
UPDATE src/styles.scss (181 bytes)

确认动作

启动本地服务器

npm run start

如果在Web浏览器上访问localhost:4200，并显示与安装之前相同的页面，那就没问题。

服务器可以使用 Control + C（如果是Windows则是Ctrl + C）停止。

试着在屏幕上添加一个组件（按钮）。

现在，让我们来详细解释一下如何将实际的材料设计组件添加到屏幕上。

添加模块

确认必要的进口文后，将以下内容添加到应用程序的模块管理文件（app.module.ts）的两个位置。

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

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

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

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
+     MatButtonModule, // 追加
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

添加组件

要实际添加组件，您可以选择组件详细页面上的“OVERVIEW”标签，并单击右上角的“<>”图标，以查看在HTML/CSS/TS文件中应该添加什么代码。

非常简单地，将 “Raised Button” 添加到空白页面状态的顶部显示组件中，使用 Primary 颜色。

<div>
  <!-- ボタン追加 -->
  <button mat-raised-button color="primary">Primary</button>
</div>

按钮的添加已经完成。

确认

只需在组件详细页面确认导入后，将示例代码添加到所需页面的源代码中，即可将Material Design组件添加到屏幕中。

然后，通过将各种组件结合起来，不断引入屏幕上，来丰富应用程序的设计！