Angular中ng-template和ng-container指令如何高效运用在模板布局和内容管理？

本文共计1400个文字，预计阅读时间需要6分钟。

本章节简要介绍Angular模板指令ng-template和ng-container。了解ng-template和ng-container的使用方法。

ng-template指令简介ng-template是Angular的结构型指令，用于在模板中插入HTML内容。

ng-template使用方法

1.在组件模板中添加ng-template指令。

2.在ng-template标签内编写HTML代码。

ng-container指令简介

ng-container是一个Angular结构型指令，用于在DOM中创建一个不可见的容器。

ng-container使用方法

1.在组件模板中添加ng-container指令。

2.在ng-container标签内放置需要作为一组内容处理的HTML元素。

本篇文章带大家简单了解一下Angular模板的ng-template和ng-container指令，介绍一下ng-template和ng-container指令使用方法。

ng-template指令简介

ng-template是一个 Angular 结构型指令，用来渲染 HTML。 它永远不会直接显示出来。 事实上，在渲染视图之前，Angular 会把 ng-template 及其内容替换为一个注释。

如果没有使用结构型指令，而仅仅把一些别的元素包装进 ng-template 中，那些元素就是不可见的。

像*ngFor、 *ngIf这些指令Angular内部会把这些属性翻译成一个 元素 并用它来包裹宿主元素。