Angular 2 - 指令

指令是一个自定义 HTML 元素，用于扩展 HTML 的功能。Angular 2 具有以下指令，它们作为 BrowserModule 模块的一部分被调用。

  • 恩吉夫
  • ngFor

如果查看 app.module.ts 文件，您将看到以下代码和定义的 BrowserModule 模块。通过定义此模块，您将可以访问这 2 个指令。

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 的类添加一个属性。这将是布尔类型。让我们保持这个值为真。

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'

该变量是一个临时变量，用于显示变量列表中的值。

现在让我们看一个如何使用 *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 和名称参数。

添加上述代码后，我们将在浏览器中得到以下输出。

输出

ngFor