Angular 2 中 ngIf 的概念

Muhammad Adil 2023年1月30日 2022年4月20日
  1. 隱藏 CSS 中的元件與 Angular 2 中的 ngIf
  2. Angular 2 中 ngIf 中的表示式
  3. 在 Angular 2 中使用 ngIf 的步驟
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 avatar Muhammad Adil avatar

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