Angular 是一个流行的前端框架，它使用指令来扩展 HTML 元素的功能。在使用指令时，经常需要将数据传递给它们。本文将介绍在 Angular 中如何将 JSON 对象或数组传递给指令，并提供示例代码。
传递单个 JSON 对象
假设我们有一个名为 person 的 JSON 对象，其中包含姓名、年龄和性别信息。我们想在一个自定义的 person-info 指令中显示这些信息。首先，在组件中定义 person 对象：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ----- ----------- ------------------------
--
------ ----- ------------ -
------ - -
----- --------
---- ---
------- ---------
--
-然后，在 person-info 指令中接收并显示 info 属性：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ----------------
--------- -
---------- -- --------- --------
--------- -- -------- --------
------------ -- ----------- --------
--
--
------ ----- ------------------- -
-------------- ----- ----
-在上面的示例中，我们使用 [info] 绑定将 person 对象传递给了 person-info 指令，并在指令模板中使用了 info 属性来显示对象的属性值。
传递 JSON 数组
如果我们有一组名为 persons 的 JSON 对象，我们可以通过以下方式将它们传递给指令：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ----------- ------ -- -------- ----------- ----------------------
--
--
------ ----- ------------ -
------- - -
-
----- --------
---- ---
------- ---------
--
-
----- ------
---- ---
------- -------
--
--
-这里使用了 *ngFor 指令来遍历 persons 数组，并将每个元素传递给 person-info 指令的 info 属性。
在 person-info 指令中接收并显示 info 属性的代码与之前相同。
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ----------------
--------- -
---------- -- --------- --------
--------- -- -------- --------
------------ -- ----------- --------
--
--
------ ----- ------------------- -
-------------- ----- ----
-总结
本文介绍了在 Angular 中如何将 JSON 对象或数组传递给指令。通过 [属性名] 绑定语法，我们可以将数据传递给指令，并在指令中通过 @Input 装饰器来接收数据。这些技术可以帮助我们更好地组织和管理前端应用程序的代码，提高开发效率。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ----------- ----------------------
---- ----------- ------ -- -------- ----------- ----------------------
--
--
------ ----- ------------ -
------ - -
----- --------
---- ---
------- ---------
--
------- - -
-
----- --------
---- ---
------- ---------
--
-
----- ------
---- ---
------- -------
--
--
-
------ - ---------- ----- - ---- ----------------
------------
--------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------