前言
在前端开发中，Tab 选项卡是一个非常常见的组件。而在 Angular2 中，我们可以通过动态创建组件的方式来实现 Tab 选项卡。
本文将介绍如何使用 Angular2 动态创建组件实现 Tab 选项卡，并给出详细的示例代码。
Tab 选项卡的实现方法
在 Angular2 中，我们可以使用 ngComponentOutlet 指令来动态创建组件。
具体实现方法如下：
- 定义一个
Tab组件，用于展示选项卡内容。
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ----------
--------- -
---- ---------------
-------------------------
------
--
--
------ ----- ------------ -
-------- ------ -------
-------- ------ - ------
-- 在父组件中定义
Tab组件的数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-----
----
--- ----------- --- -- ----- --- - - ------ ------------------------ ----------------------------
-- --------- --
-----
-----
-----
------------- ----------- --- -- ------
-------- ------------------- ----------------------
-- ----------- --
----------
---------------
------
------
--
--
------ ----- ------------- -
------ ---- - -
-
------ ---- ---
-------- ---- - ---------
------- -----
--
-
------ ---- ---
-------- ---- - ---------
------- ------
--
-
------ ---- ---
-------- ---- - ---------
------- ------
--
--
------ ------------------ -------- ---- -
----------------------- -- -- -
---------- - - --- ------
---
-
-- 在父组件的模板中使用
ngComponentOutlet指令动态创建Tab组件：
-- -------------------- ---- -------
------ - ---------- ------------------------- ---------- ---------------- - ---- ----------------
------ - ------------ - ---- ------------------
------------
--------- -------------------
--------- -
-----
----
--- ----------- --- -- ----- --- - - ------ ------------------------ ----------------------------
-- --------- --
-----
-----
---- ------------------
------
--
--
------ ----- -------------------- -
------ ---- - -
-
------ ---- ---
-------- ---- - ---------
------- -----
--
-
------ ---- ---
-------- ---- - ---------
------- ------
--
-
------ ---- ---
-------- ---- - ---------
------- ------
--
--
------------------------ - ----- ---------------- -- ----------- -----------------
------------------- ------------------------- ------------------------- --
------ ------------------ -------- ---- -
----------------------- -- -- -
---------- - - --- ------
---
------------------------
----- ---------------- - --------------------------------------------------------------------
----- ------------ - --------------------------------------------------
----- -------- - --------------------- -- -------------
-------------- - -----------------------
--------------- - -----
-
-示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ----------
--------- -
---- ---------------
-------------------------
------
--
--
------ ----- ------------ -
-------- ------ -------
-------- ------ - ------
-
------------
--------- -----------
--------- -
-----
----
--- ----------- --- -- ----- --- - - ------ ------------------------ ----------------------------
-- --------- --
-----
-----
-----
------------- ----------- --- -- ------
-------- ------------------- ----------------------
-- ----------- --
----------
---------------
------
------
--
--
------ ----- ------------- -
------ ---- - -
-
------ ---- ---
-------- ---- - ---------
------- -----
--
-
------ ---- ---
-------- ---- - ---------
------- ------
--
-
------ ---- ---
-------- ---- - ---------
------- ------
--
--
------ ------------------ -------- ---- -
----------------------- -- -- -
---------- - - --- ------
---
-
-
------------
--------- -------------------
--------- -
-----
----
--- ----------- --- -- ----- --- - - ------ ------------------------ ----------------------------
-- --------- --
-----
-----
---- ------------------
------
--
--
------ ----- -------------------- -
------ ---- - -
-
------ ---- ---
-------- ---- - ---------
------- -----
--
-
------ ---- ---
-------- ---- - ---------
------- ------
--
-
------ ---- ---
-------- ---- - ---------
------- ------
--
--
------------------------ - ----- ---------------- -- ----------- -----------------
------------------- ------------------------- ------------------------- --
------ ------------------ -------- ---- -
----------------------- -- -- -
---------- - - --- ------
---
------------------------
----- ---------------- - --------------------------------------------------------------------
----- ------------ - --------------------------------------------------
----- -------- - --------------------- -- -------------
-------------- - -----------------------
--------------- - -----
-
-总结
本文介绍了使用 Angular2 动态创建组件实现 Tab 选项卡的方法，并给出了详细的示例代码。希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655def2bd2f5e1655d83a7dd