Angular 2 中 ngIf 的概念
在 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 {
}
点击这里查看上面代码的演示。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook