在前端开发中，面板是一个常见的 UI 组件，用户可以通过面板来选择不同的选项。而 ng-template 是 Angular 提供的一个模板机制，可以用来创建可复用的组件模板，非常适合用于构建面板组件。本文将介绍如何使用 ng-template 实现选择面板，并提供详细的代码示例和指导意义。
1. NgTemplate 概述
ng-template 是一个 Angular 指令，它定义了一个模板片段，可以被其它组件引用和复用。通常情况下，我们使用 ng-template 来创建组件的内部内容，然后通过组件的接口传递数据进去，并将其渲染到页面上。
ng-template 的语法非常简单，只需要在 HTML 中添加一个 <ng-template> 标签，并为其指定一个名字即可：
<ng-template #myTemplate> <div>这是一个 ng-template</div> </ng-template>
在组件代码中，我们可以通过 ViewChild 装饰器来引用这个 ng-template，并将数据传递给它：
-- -------------------- ---- -------
------ - ---------- ---------- ----------- - ---- ----------------
------------
--------- -------------------
--------- -
------------- ------------------------------ -------- ------ -------------------------
------------ ----------- ---------
----------- ---------------
--------------
--
--
------ ----- ----------- -
------------------------ ------------ -----------------
-在上面的代码中，我们首先使用 *ngTemplateOutlet 指令将 myTemplate 插入到页面中，并通过 context 参数将 name 数据传递给它。然后在组件的模板中添加了一个名为 myTemplate 的 ng-template，并在其中使用 let-name 语法来接收传递进来的 name 数据。
2. 实现选择面板
有了 ng-template 的基本概念，我们就可以来实现一个选择面板组件了。我们将创建一个 SelectPanelComponent，它有一个 panelData 输入属性，用于接收需要显示的选项列表，同时也有一个 selectedData 输出属性，用于在用户选择其中一个选项后将其值传递给父组件。
首先，我们需要在组件中添加一个名为 panel 的 ng-template，用于渲染选项列表。我们使用 ngFor 指令来遍历 panelData 中的每个选项，并将每个选项的值，以及一个 isHighlighted 属性绑定到模板中。
-- -------------------- ---- -------
---- ---------------------
------------ -------
---- --------------------- ----------- ------ -- ----------
------------------------------------------
--------------------------------------
-- ------------ --
------
--------------
------在模板中，我们使用 class 绑定语法来根据选项的 isHighlighted 属性来动态添加 highlighted 样式类，以便在样式中高亮显示被选中的选项。同时，在选项被点击时，我们调用 onOptionClick 方法，将其对应的 value 值传递给 selectedData 输出属性。
需要注意的是，在模板中我们使用了 <div class="select-pill"> 元素来作为整个选择面板的触发器。这个元素的内部可以是任何内容，例如一个图标，或者一个文本输入框，用于展示当前选择的值。当用户点击这个元素时，就会展示出 panel 模板中定义的选项列表。
<div class="select-pill" (click)="isPanelShown = true">
{{ selectedValue }}
<i class="fa fa-caret-down"></i>
</div>接下来，我们需要在组件代码中使用 ViewChild 装饰器来引用这个 ng-template，并将它渲染到 select-panel 的 div 元素中。
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------- ---------- ----------- - ---- ----------------
--------- ------------ -
------ -------
------ ----
--------------- --------
-
------------
--------- -------------------
------------ --------------------------------
--
------ ----- -------------------- -
------------------- ------- -----------------
-------- ---------- -------------- - ---
--------- ------------ - --- --------------------
------------- - ---
------------ - ------
-------------------- ----- ---- -
------------------ - ------
----------------- - ------
------------------------------- -- -------------------- - ------------ --- -------
------------------------------
-
-在组件代码中，我们首先定义了一个 SelectOption 接口，用于表示每个选项的数据结构。然后使用 ViewChild 装饰器引用了 panel 模板，并将其渲染到 select-panel 的 div 元素中。
在组件代码中，我们还实现了 onOptionClick 方法，用于在用户选择某个选项后更新组件状态。具体来说，当用户点击选项时，我们将选项的 value 值赋值给 selectedValue 属性，将 isPanelShown 设置为 false，以隐藏选项列表。
当选项被点击后，我们将 panelData 中所有选项的 isHighlighted 属性设为 false，并将被选中的选项的 isHighlighted 属性设为 true，以便在模板中高亮显示该选项。最后，我们通过 selectedData 输出属性将选中的 value 值传递给父组件。
3. 使用示例
为了测试 SelectPanelComponent 组件的功能，我们可以在 app.component.ts 中定义一个选项列表和一个回调函数，并将它们作为输入属性和输出属性分别传递给 SelectPanelComponent 组件。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------------- ----------------------- -----------------------------------------------------
--
--
------ ----- ------------ -
--------- - -
- ------ ------ ------ - --
- ------ ------ ------ - --
- ------ ------ ------ - --
--
--------------- ----- ---- -
------------------ -------
-
-在模板中，我们使用了 app-select-panel 元素来引用 SelectPanelComponent 组件，并传递了 panelData 和 onSelect 作为其输入属性和输出属性。
4. 总结
在本文中，我们学习了如何使用 ng-template 实现选择面板。通过 ng-template，我们可以将选项列表抽象成一个可复用的组件，并将其与其它组件进行组合，从而实现更加复杂的 UI 组件。最后，我们提供了一个完整的示例代码，希望能够帮助读者深入了解和使用 ng-template 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458f998968c7c53b0b45013