前言
Angular Material 是由 Angular 团队开发的 UI 组件库，可用于创建漂亮、具有一致性的应用程序。 在本文中，我们将重点讨论如何构建可重用的 Angular Material 组件，为你的应用程序提供一致的外观和感觉，同时减少代码重复。
步骤1：创建组件
首先，我们需要创建一个组件来封装我们的自定义 Angular Material 组件。 打开终端并运行以下命令：
ng g c my-custom-component
该命令将在 src/app/my-custom-component 目录中创建一个新的组件。 打开该组件并确保它在应用程序中正确工作。
步骤2：导入 Angular Material 组件
要构建可重用的 Angular Material 组件，我们需要从 Angular Material 中导入所需的组件。 打开你的 app.module.ts 文件并导入组件。
例如，如果我们想要导入 Angular Material Button 组件，可以使用以下代码：
import { MatButtonModule } from '@angular/material/button';我们需要在 @NgModule 调用中将它们添加到应用程序中。 我们应该将所有导入的组件集中在导入声明中，以便更清晰地了解我们的应用程序使用了哪些组件。
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
-----------
------------- ---------------
-------- -
--------------
------------------------
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- --步骤3：封装组件
现在我们已经导入了 Angular Material 组件，我们可以开始编写我们自己的组件代码。 在本例中，我们将创建一个带有自定义文本的按钮。
<button mat-button>Custom Button</button>
为了使这个组件可重用，我们需要提供一个名为 text 的输入属性，以便在其他组件中使用不同的文本。 修改组件模板以添加输入属性。
<button mat-button>{{ text }}</button>现在，我们已经准备好将 text 输入属性添加到组件类中。
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- -------------------------- ------------ --------------------------------------- ---------- --------------------------------------- -- ------ ----- -------------------------- - -------- ----- ------- -
步骤4：重构组件
现在我们可以将组件作为 Angular Material 按钮的封装器来使用，但是我们的组件名称可能不是很具有启发性。 我们应该更改组件名称以反映其功能。
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- -------------------- ------------ --------------------------------- ---------- --------------------------------- -- ------ ----- --------------------- - -------- ----- ------- -
还应更改组件模板文件的名称，以减少混淆。 现在我们可以在其他组件中使用以下代码来重用此组件：
<app-custom-button text="Custom Text"></app-custom-button>
步骤5：完善组件
在前面的步骤中，我们已经创建了自定义 Angular Material 组件并将其重构为更具启发性的名称。 现在我们可以使组件更加复杂。
我们可以添加更多的输入属性来控制不同的组件样式，例如按钮颜色和大小。
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- -------------------- ------------ --------------------------------- ---------- --------------------------------- -- ------ ----- --------------------- - -------- ----- ------- -------- ------ ------ - ---------- -------- ----- ------ - --------- -
我们还可以通过添加更多的导入和提供更多的属性来支持随附的图标。
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------ - --------------- - ---- -------------------------
------ - ------------ - ---- ----------------------------
------------
--------- --------------------
------------ ---------------------------------
---------- ---------------------------------
--
------ ----- --------------------- -
-------- ----- -------
-------- ------ ------ - ----------
-------- ----- ------ - ---------
-------- ----- -------
------------
------- ---------------- ----------------
------- ---------- ------------
- -
--------------------------------
--------------
-----------------------------------------------------------------------
--
-
-现在，在使用该组件之前，我们必须首先将该 SVG 图标文件放入 src/assets 文件夹中。 接下来，在使用该组件时，我们可以添加 icon 输入属性，并将 MatIcon 组件包装在该按钮中，使该组件变得更加灵活。
<button mat-icon-button [color]="color" [matBadge]="count" matBadgePosition="below after"> <mat-icon svgIcon="custom-icon"></mat-icon> </button>
结论
本文介绍了如何构建可重用的 Angular Material 组件，以便在您的应用程序中提供一致的外观和感觉。 我们从创建组件开始，然后导入所需的 Angular Material 组件。 接下来，我们封装我们的组件并将其重构为更具有启发性的名称。 最后，我们添加更多的属性和导入，以更好地支持图标和其他可定制的属性。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67023768d91dce0dc846d749