在 Angular 中，我们使用 ngIf 指令来根据条件来渲染 DOM。众所周知，ngIf 指令有一个问题，就是当条件改变时，会重新渲染 DOM，导致多次渲染问题。这种情况可能会影响性能，影响用户体验。
本文将介绍在 Angular 中如何解决这个问题，降低多次渲染对性能的影响。
问题描述
在 Angular 应用中，我们经常会使用 ngIf 来根据条件来显示或者隐藏 DOM 元素。例如：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
------------- -------------
--------------
---------------
--
--
------ ----- ---------------- -
---- - -----
-当我们在代码中改变 show 变量的值时，Angular 会重新渲染整个 app-example 组件。例如：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
------------- -------------
--------------
---------------
------- ----------------------------------
--
--
------ ----- ---------------- -
---- - -----
-------- -
--------- - -----------
-
-在点击 Toggle 按钮时，show 变量的值会发生改变，导致整个 app-example 组件被重新渲染。
在这里我们可以通过把 ngIf 切换为 CSS 显示逻辑来解决问题。
-- -------------------- ---- -------
------------
--------- --------------
--------- -
-- ------------ ---------------------------
------- ----------------------------------
--
--
------ ----- ---------------- -
---- - -----
-------- -
--------- - -----------
-
-下面我们将介绍更多的解决方案。
解决方案
解决方案一：使用 ng-container
我们可以使用 ng-container 来包含所有的模板内容，并把 ngIf 指令应用到 ng-container 上。这里可以使用 ng-container 来避免额外的元素被插入到 DOM 中。
例如：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
------------- ------------ ---- ---------
------------ ---------
--------------
--------------
---------------
------- ----------------------------------
--
--
------ ----- ---------------- -
---- - -----
-------- -
--------- - -----------
-
-这种方式也可以避免多次渲染所带来的性能问题。
解决方案二：使用 ngSwitch
我们可以使用 ngSwitch 指令来代替 ngIf 指令来触发条件渲染。ngSwitch 指令提供了更多的选项，可以根据不同的值来渲染不同的模板内容。这种方式也可以避免多次渲染所带来的性能问题。
例如：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
------------- ------------------
-- --------------------------------
---------------
------- ----------------------------------
--
--
------ ----- ---------------- -
---- - -----
-------- -
--------- - -----------
-
-解决方案三：使用 trackBy
我们可以使用 trackBy 监控变化时更新指令。使用 trackBy 指定要跟踪的数据属性。在变化时，只更新数据中发生更改的指令。
例如：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
-- ----------- ---- -- ------ -------- ------------- ---- ------
------- --------------------------------
--
--
------ ----- ---------------- -
----- - ------ --- ----- --- ----- ----
--------- -
--------------------- - - ------------------ - ----
-
---------------- ------- ----- ------- -
------ ------
-
-这种方式也可以避免多次渲染所带来的性能问题。
总结
在 Angular 中，使用 ngIf 指令可能会导致多次渲染的问题，影响性能和用户体验。我们可以使用一些技巧来避免这个问题，例如使用 ng-container、ngSwitch 以及 trackBy。这些技巧可以让我们更有效率的处理条件渲染。但是，我们需要根据具体场景来选择最佳的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487f0a548841e989467973b