Angular 2 - 指令

上一頁
下一頁

指令是用於擴充套件HTML功能的自定義HTML元素。Angular 2 具有以下指令，它們作為 BrowserModule 模組的一部分被呼叫。

  • ngIf
  • ngFor

如果您檢視 app.module.ts 檔案，您將看到以下程式碼和定義的 BrowserModule 模組。透過定義此模組，您可以訪問這兩個指令。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

現在讓我們詳細瞭解每個指令。

ngIf

ngIf 元素用於在表示式計算結果為true時將元素新增到HTML程式碼中，否則不會將元素新增到HTML程式碼中。

語法

*ngIf = 'expression'

如果表示式計算結果為true，則新增相應的元素；否則，不新增元素。

現在讓我們來看一個如何使用 *ngIf 指令的示例。

步驟 1 - 首先向名為 appStatus 的類新增一個屬性。這將是布林型別。讓我們將其值設定為 true。

import { Component } from '@angular/core';  

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

步驟 2 - 現在在 app.component.html 檔案中，新增以下程式碼。

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

在上面的程式碼中，我們現在使用了 *ngIf 指令。在指令中，我們正在評估 appStatus 屬性的值。由於屬性的值應計算為 true，這意味著 div 標籤應顯示在瀏覽器中。

新增上述程式碼後，我們將在瀏覽器中獲得以下輸出。

輸出

ngIf

ngFor

ngFor 元素用於根據 For 迴圈的條件新增元素。

語法

*ngFor = 'let variable of variablelist'

變數是一個臨時變數，用於顯示variablelist中的值。

現在讓我們來看一個如何使用 *ngFor 指令的示例。

步驟 1 - 首先向名為 appList 的類新增一個屬性。這將是可用於定義任何型別陣列的型別。

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

因此，我們將 appList 定義為具有 2 個元素的陣列。每個元素都有 2 個子屬性：ID 和 Name。

步驟 2 - 在 app.component.html 中，定義以下程式碼。

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

在上面的程式碼中，我們現在使用 ngFor 指令迭代 appList 陣列。然後，我們定義一個列表，其中每個列表項都是陣列的 ID 和 name 引數。

新增上述程式碼後，我們將在瀏覽器中獲得以下輸出。

輸出

ngFor
列印頁面
上一頁
下一頁
廣告