在 Angular 中，组件是构建用户界面的主要构建块。但是，有时我们需要在不同的组件之间共享 DOM 结构。这就是 Angular ngContent 指令的作用。
什么是 ngContent 指令？
ngContent 指令是 Angular 中的一个指令，它允许我们在一个组件中定义一个插槽，然后在另一个组件中使用该插槽来共享 DOM 结构。
如何使用 ngContent 指令？
首先，我们需要在父组件中定义一个插槽。这可以通过在组件模板中使用 ng-content 元素来完成。
<app-header> <h1>Welcome to My App</h1> </app-header>
在上面的示例中，我们在 app-header 组件中定义了一个插槽，并在插槽中包含了一个 h1 元素。
接下来，我们需要在子组件中使用该插槽。这可以通过在组件模板中使用 ng-content 元素，并指定插槽的名称来完成。
-- -------------------- ---- -------
------------
----------- -- -- --------
-------------
-------------
------------- -------
---- --------- ---------- ---- -- -- ---
---------------
------- -- --- ------- -- -- --------
--------------在上面的示例中，我们在 app-content 组件中使用了 app-header 组件中定义的插槽，并在插槽中包含了一个 ng-container 元素，并指定插槽的名称为 header。
插槽中的内容会被替换为 app-header 组件中定义的 h1 元素。
实战演练
下面是一个简单的示例，演示如何使用 ngContent 指令在组件之间共享 DOM 结构。
首先，我们需要创建两个组件：app-header 和 app-content。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
--------
-------------------------
---------
-
--
------ ----- --------------- --
------------
--------- --------------
--------- -
---- ------------------
------------- ----------------------
------- -- --- ------- -- -- --------
------
-
--
------ ----- ---------------- --在 app-header 组件中，我们定义了一个插槽，并在插槽中包含了一个 ng-content 元素。
在 app-content 组件中，我们使用了 app-header 组件中定义的插槽，并在插槽中包含了一个 ng-container 元素，并指定插槽的名称为 header。
接下来，我们需要在 app.component.html 文件中使用这两个组件。
<app-header> <h1>Welcome to My App</h1> </app-header> <app-content> <ng-container header></ng-container> </app-content>
在上面的示例中，我们在 app-header 组件中定义了一个插槽，并在插槽中包含了一个 h1 元素。
在 app-content 组件中，我们使用了 app-header 组件中定义的插槽，并在插槽中包含了一个 ng-container 元素，并指定插槽的名称为 header。
插槽中的内容会被替换为 app-header 组件中定义的 h1 元素。
结论
在本文中，我们讨论了 Angular ngContent 指令的作用，以及如何在组件之间共享 DOM 结构。我们还演示了如何创建一个简单的示例，并使用 ngContent 指令来共享 DOM 结构。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672856ba2e7021665e1fddad