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