在 Angular 开发中，我们常常需要实现 Tab 页的功能。通常情况下，我们会使用第三方库或组件来实现，如 ng-bootstrap、mat-tab 或者自定义组件。然而，在某些情况下，我们需要动态地添加或移除 Tab 页，这时候，我们就需要用到 Angular 的 ngTemplateOutlet 指令。
ngTemplateOutlet
ngTemplateOutlet 指令是 Angular 提供的一个内置指令，可以用来动态地渲染模板。它需要一个引用模板，并且可以将上下文对象（context object）传递给模板，从而使模板中的数据动态显示。我们可以通过在 HTML 模板中使用 ng-container 或者 ng-template 标签，将模板引用传递给 ngTemplateOutlet 指令。
动态渲染 Tab 页
下面我们来看看如何使用 ngTemplateOutlet 指令来实现动态渲染 Tab 页的功能。
Step 1：定义 Tab 组件
我们首先需要编写一个 Tab 组件，包括 Tab 标题以及对应的渲染内容。Tab 组件的代码如下：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ----------
--------- -
------------ ----------
---- ---------------------------------
--------------
------------- --------------------------------------------
------------- -------------------------------------------
--
--
------ ----- ------------ -
-------- ------ -------
-------- -------- ----
-我们可以看到，这个组件包含两个内置模板，分别是 Tab 标题和渲染内容，使用 ng-container 和 ngTemplateOutlet 指令将内置模板渲染到组件中。
Step 2：定义 Tab 容器
我们还需要实现一个 Tab 容器，用于包含 Tab 组件，并动态地添加或移除 Tab 组件。Tab 容器的代码如下：
-- -------------------- ---- -------
------ - ---------- ---------- --------------- - ---- ----------------
------ - ------------ - ---- ------------------
------------
--------- --------------------
--------- -
---- ----------------------
---- -----------------
----
---------------------
-----------------------------
----------- --- -- -----
------------------------
-
------------- ------------------------------------------------
------
------
---- --------------------
------------- -----------------------------------------------------------
------
------
--
--
------ ----- --------------------- -
------------------------------ ----- ------------------------
------------ -------------
-------------- ------------- -
---------------- - ----
-
-我们可以看到，这个组件引用了 Tab 组件，并使用 QueryList 获取 Tab 组件实例的列表。通过循环遍历 tabs 列表，我们可以将每个 Tab 组件的标题渲染到 Tab 容器的菜单栏中。
我们还定义了一个 selectedTab 变量，用于保存当前选中的 Tab 组件实例。通过 selectTab 方法，我们可以切换 Tab 内容的显示。
Step 3：使用 Tab 容器
对于调用方，在 HTML 模板中使用 Tab 容器组件的代码如下：
-- -------------------- ---- -------
-------------------
-------- ------------- ----
------------ --------------- - ----------------------
------------ ------------- ---------------
----------
-------- ------------- ----
------------ --------------- - ----------------------
------------ ------------- ---------------
----------
--------------------我们可以看到，调用方可以在 Tab 容器组件内部使用 Tab 组件，并在 Tab 组件内部定义每个 Tab 的标题和内容模板，从而动态渲染 Tab 页。
总结
通过本篇文章的学习，我们学会了如何使用 Angular 的 ngTemplateOutlet 指令来动态渲染 Tab 页。同时，我们了解到了 ng-container 和 ng-template 标签的用法，并学会了如何通过 QueryList 获取子组件实例、使用 ngFor 展示列表和通过 ngClass 切换样式等基础用法。希望本文能对你在 Angular 开发中实现动态渲染 Tab 页的需求有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ded69af6b2d6eab39f8cb6