在 Angular 中，我们常常需要根据某个条件来判断是否渲染某个组件或者 HTML 元素。此时，我们可以使用 ngIf 指令来实现条件渲染。
ngIf 指令的基本用法
ngIf 指令可以在模板中根据给定的条件来添加或删除某个组件或 HTML 元素。它的基本语法如下所示：
------------- ------------------------------------
我们可以将一个条件表达式（如一个布尔值）绑定到 ngIf 指令的属性中。如果条件为 true，则 ngIf 指令所在的元素将被添加到 DOM 树中，否则它将被删除。
一个简单的示例
让我们看一个简单的示例，来理解 ngIf 指令的基本用法：
---- --------------------- ------------
如果 isTrue 的值为 true，则上面的 div 元素将被添加到 DOM 树中，否则它将被删除。
ngIf 指令的高级用法
ngIf 指令有一些高级用法，可以让我们更灵活地控制条件渲染。
else 子句
ngIf 指令可以使用 else 子句，以便在条件为 false 时显示一个备用模板。它的语法如下所示：
---- ----------------- ---- -------------------- ------------ ----------------------------
当条件为 true 时，ngIf 指令将显示上面的 div 元素。当条件为 false 时，ngIf 指令将显示 elseBlock 模板中的内容。
ng-template
ng-template 是一个 Angular 的内置指令，它可以用来定义一个模板。我们可以使用 ng-template 来创建一个备用模板，然后将它和 ngIf 指令一起使用。
示例代码
让我们看一个更复杂的示例，来理解 ngIf 指令的高级用法：
---- -------------
---------- -- --------- --------
------- ----------------------------------
------
---- ------------- ---- ------------
---------- ----------
----- -------------------
------ ----------- ---------------------- -----------------------
------ --------------- ---------------------- -----------------------
------- ----------------------------
-------
------
------------ ------------
---------- ----- ----------
--------------上面的代码中，我们使用了 ngIf 指令和 else 子句来实现条件渲染。当 user 存在时，我们显示一个欢迎消息和一个注销按钮。当 user 不存在时，我们显示一个登录表单和一个提示信息。
总结
ngIf 指令是 Angular 中用于条件渲染的常用指令之一。它可以帮助我们根据某个条件来控制组件或 HTML 元素的显示或隐藏，从而为用户提供更好的交互体验。在实际开发中，我们可以根据具体的需求来使用 ngIf 指令的基本用法或者高级用法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664f1a44d3423812e4014e33