Angular 是一个流行的前端框架，允许开发人员使用组件化思维来构建 Web 应用程序。组件是应用程序中的核心部分，它们允许我们将 UI 分解成小部件并使其可重用。在这篇文章中，我们将探讨 Angular 中如何制作可复用的组件。
简介
Angular 组件通常由三个部分组成：
- 模板（template）
- 样式（style）
- 组件代码（component code）
使用这些部分，我们可以创建可重复的组件，并且可以在父级组件中重用。为了使组件具有可重用性，我们需要使其具有以下两个特征：
- 可定制：允许使用者通过输入属性和输出事件来自定义组件。
- 可插入：允许组件作为子组件插入到其他组件中。
以下是如何实现这两个特征的方法。
可定制
在 Angular 中，我们可以通过输入属性来向组件传递数据。这些输入属性可以在组件类中声明并通过模板进行传递。
例如，假设我们正在创建一个可重用的 Alert 组件，并且需要允许用户自定义警报的消息。我们可以在 Alert 组件类中声明输入属性：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ------------
--------- ----- ------------- --------------------------- --- ---------- -------------------------- --- ----------
-- ------- --
-------
--
------ ----- -------------- -
-------- ------- - ---
-------- ---- - ----------
-在模板文件中，我们可以使用方括号语法将输入属性绑定到组件实例中的属性：
<app-alert message="This is a success message" type="success"></app-alert> <app-alert message="This is an error message" type="danger"></app-alert>
现在，我们的 Alert 组件具有可定制性，并允许使用者自定义消息和类型。
可插入
为了允许组件作为子组件插入到其他组件中，我们需要使用 Angular 的投影（projection）功能。投影允许组件将其内容插入到组件内部的指定位置。
假设我们有一个可重用的 Card 组件，并且想要允许使用者插入标题和内容。我们可以在组件的模板中使用 Angular 的 ng-content 指令来进行投影：
<div class="card">
<div class="card-header">
<h3>{{ title }}</h3>
</div>
<div class="card-body">
<ng-content></ng-content>
</div>
</div>在父级组件中使用 Card 组件时，我们可以将任何内容插入到 <ng-content> 标签中：
<app-card> <h4>My Card Title</h4> <p>This is the card content.</p> </app-card>
现在，我们已经创建了可重用的 Card 组件，并允许使用者将任何内容插入到 Card 组件中的特定位置。
示例代码
以下是完整的示例代码，包括 Alert 组件和 Card 组件的代码：
Alert 组件
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ------------
--------- ----- ------------- --------------------------- --- ---------- -------------------------- --- ----------
-- ------- --
-------
--
------ ----- -------------- -
-------- ------- - ---
-------- ---- - ----------
-Card 组件
<div class="card">
<div class="card-header">
<h3>{{ title }}</h3>
</div>
<div class="card-body">
<ng-content></ng-content>
</div>
</div>结论
通过使用输入属性和投影，我们可以轻松地创建可重复使用的组件，并且可以让组件具有高度的可定制性和可插入性。在开发可重用的 Angular 组件时，请记住这些要点，以确保您的组件具有最大的灵活性和可重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6718c052ad1e889fe22e02f3