在 Angular 中如何使用 ng-container 指令
在 Angular 中，ng-container 指令是一个非常有用的指令，它可以用来包装一个或多个 HTML 元素，而不会在 DOM 中添加额外的节点。这个指令在一些特定场景下非常有用，比如条件渲染和循环渲染等场景。
那么，在 Angular 中如何使用 ng-container 指令呢？接下来，我们就来详细讲解一下。
使用 ng-container 进行条件渲染
在 Angular 中，我们经常需要根据某些条件来渲染不同的视图。这个时候，我们可以使用 ng-container 指令来进行条件渲染。
假设我们有一个组件，需要根据用户的登录状态来渲染不同的视图。代码如下所示：
<ng-container *ngIf="isLoggedIn"> <p>Welcome back!</p> </ng-container> <ng-container *ngIf="!isLoggedIn"> <p>Please log in.</p> </ng-container>
在上面的代码中，我们使用了两个 ng-container 指令来进行条件渲染。当用户已经登录时，我们会渲染一个“Welcome back!”的文本，而当用户未登录时，则会渲染一个“Please log in.”的文本。
需要注意的是，ng-container 指令并不会在 DOM 中添加额外的节点，因此不会对页面性能造成任何影响。
使用 ng-container 进行循环渲染
在 Angular 中，我们也经常需要根据一组数据来进行循环渲染。这个时候，我们同样可以使用 ng-container 指令来进行循环渲染。
假设我们有一个组件，需要渲染一个列表，列表数据存储在一个数组中。代码如下所示：
<ng-container *ngFor="let item of list">
<p>{{ item }}</p>
</ng-container>在上面的代码中，我们使用了一个 ng-container 指令和一个 ngFor 指令来进行循环渲染。ngFor 指令会遍历 list 数组中的每一项，然后在 ng-container 中渲染一个“
{{ item }}
”的 HTML 元素。总结
在本文中，我们介绍了在 Angular 中如何使用 ng-container 指令。ng-container 指令可以用来进行条件渲染和循环渲染等操作，而不会在 DOM 中添加额外的节点。这个指令在 Angular 中非常有用，可以帮助我们更好地组织和管理代码。
示例代码
在下面的示例代码中，我们使用 ng-container 指令进行了条件渲染和循环渲染操作。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
--------- -
------------- -------------------
---------- ---- -- -------- -------
---------------
------------- --------------------
--------- --- -------
---------------
------------- ----------- ---- -- ------
----- ---- ------
---------------
-
--
------ ----- ---------------- -
---------- - -----
-------- - ----- -----
---- - ------ --- ----- --- ----- ----
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fa1d648841e9894dcf23d