在 Angular 开发中，我们通常会创建组件来实现页面中的各种功能。在组件中，我们可以使用 ng-content 指令来实现灵活的内容投影，使得组件可以接受任意的 HTML 内容，从而能够更好地适应各种场景。
ng-content 的基本用法
ng-content 指令可以在组件的模板中用来标记一个插入点，用于接收外部传入的内容。具体来说，我们可以在组件的模板中使用 ng-content 标签来定义一个插入点，如下所示：
-------------------------
上述代码表示在组件的模板中定义了一个 ng-content 标签，用于接收外部传入的内容。当组件被使用时，外部传入的内容将会被插入到这个标签所在的位置。
下面是一个简单的组件示例，其中使用了 ng-content 指令：
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
---- ---------------------
------ --------------
-------------------------
------
--
--
------ ----- ----------- --上述代码定义了一个名为 MyComponent 的组件，其中使用了 ng-content 指令来接收外部传入的内容。当该组件被使用时，外部传入的内容会被插入到 ng-content 标签所在的位置。
ng-content 的高级用法
除了基本用法之外，ng-content 指令还支持一些高级用法，可以帮助我们更加灵活地使用组件。
1. 选择器
ng-content 指令支持使用选择器来指定接收哪些类型的内容。具体来说，我们可以在 ng-content 标签中使用 select 属性来指定一个选择器，如下所示：
----------- ---------------------------
上述代码表示只有符合 .foo 选择器的内容才会被插入到 ng-content 标签所在的位置。
下面是一个示例，其中使用了选择器来限制外部传入的内容：
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
---- ---------------------
------ --------------
----------- ---------------------------
------
--
--
------ ----- ----------- --上述代码中，ng-content 标签使用了 .foo 选择器，只有符合该选择器的内容才会被插入到组件中。
2. 多个插入点
ng-content 指令还支持定义多个插入点，以便更加灵活地接收外部传入的内容。具体来说，我们可以在组件的模板中定义多个 ng-content 标签，如下所示：
---- ---------------------
------ --------------
----------- ------------------------------
---- ----------------
----------- ----------------------------
------
----------- ------------------------------
------上述代码定义了一个名为 MyComponent 的组件，其中定义了三个插入点：.header、.body 和 .footer。当该组件被使用时，外部传入的内容会根据选择器被插入到对应的插入点中。
下面是一个示例，其中使用了多个插入点：
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
---- ---------------------
------ --------------
---- -------------- ---------------
----------- ------------------------------
------
---- ----------------
----------- ----------------------------
------
---- -------------- ---------------
----------- ------------------------------
------
------
--
--
------ ----- ----------- -
------ - -----
------ - -----
-上述代码中，MyComponent 组件定义了三个插入点：.header、.body 和 .footer。当 header 或 footer 属性为 true 时，对应的插入点才会被渲染出来。这样，我们就可以根据需要选择性地使用插入点来接收外部传入的内容。
总结
ng-content 指令是 Angular 组件中非常重要的一部分，它可以帮助我们更加灵活地接收外部传入的内容，使得组件可以适应更多的场景。除了基本用法之外，ng-content 指令还支持选择器和多个插入点等高级用法，可以帮助我们更好地使用组件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650bb42595b1f8cacd5c9512