迹忆客 专注技术分享

在 Angular 2 中，ngIf 指令是 Angular 2 中最直接和最有用的指令之一。它用于根据表达式的评估有条件地显示或隐藏 HTML 元素。

ngIf 指令评估一个表达式，如果它评估为真，它将呈现给定的元素。如果不是，它根本不会渲染该元素。

当多个视图共享共同特征时，该指令有助于减少 DOM 元素的数量。

这篇文章将教你关于 ngIf 的一切。

隐藏 CSS 中的组件与 Angular 2 中的 ngIf

即使 HTML 缺少 if 语句，CSS 中的 show 和 visibility 属性也可用于隐藏页面的各个部分。

我们可以在 HTML 元素中添加或删除 CSS 属性，并使用 JavaScript 从页面中隐藏元素。但是，这与 ngIf 不同。

如果一个元素隐藏在 ngIf 中，则该元素在页面上不存在。

如果你使用 Chrome 开发工具调查该页面，你将不会在 DOM 中看到任何 HTML 元素。

Angular 2 中 ngIf 中的表达式

ngIf 指令接受任何有效的 Typescript 短语作为输入，而不仅仅是布尔值。接下来将评估表达式的彻底性以确定是否应显示该元素。

除了布尔值，我们还可以向 ngIf 发送文本、数组和对象。

在 Angular 2 中使用 ngIf 的步骤

在 Angular 2 中使用 ngIf 需要遵循以下步骤：

• 编写一个将被评估为真或假的表达式。
• 用左括号和右括号将表达式括起来，例如 (true || false)。
• 添加管道字符|在左括号和右括号之间。
• 使用步骤 1 中的表达式将 ngIf 指令添加到你的模板中。

例子：

让我们在 Angular 2 中讨论一个完整的 ng-if 示例。

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: 
    `<h1 *ngIf=" 34< 100" >I'm Adil</h1> 
    <h1 *ngIf="3>1" > I'm John</h1>
    <h1 *ngIf="46<200" >I'm Steven</h1>`,
})
export class AppComponent  {
 }