Angular 2 - Chỉ thị

A directivelà một phần tử HTML tùy chỉnh được sử dụng để mở rộng sức mạnh của HTML. Angular 2 có các lệnh sau được gọi như một phần của mô-đun BrowserModule.

• ngif
• ngFor

Nếu bạn xem tệp app.module.ts, bạn sẽ thấy mã sau và mô-đun BrowserModule được xác định. Bằng cách xác định mô-đun này, bạn sẽ có quyền truy cập vào 2 chỉ thị.

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 { }

Bây giờ chúng ta hãy xem xét từng chỉ thị một cách chi tiết.

ngIf

Các ngif phần tử được sử dụng để thêm phần tử vào mã HTML nếu nó đánh giá là true, nếu không nó sẽ không thêm phần tử vào mã HTML.

Cú pháp

*ngIf = 'expression'

Nếu biểu thức đánh giá là true thì phần tử tương ứng được thêm vào, các phần tử khác không được thêm vào.

Bây giờ chúng ta hãy xem một ví dụ về cách chúng ta có thể sử dụng lệnh * ngif.

Step 1- Đầu tiên hãy thêm một thuộc tính vào lớp có tên appStatus. Đây sẽ là kiểu Boolean. Hãy giữ giá trị này đúng.

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

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

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

Step 2 - Bây giờ trong tệp app.component.html, hãy thêm mã sau.

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

Trong đoạn mã trên, bây giờ chúng ta có chỉ thị * ngIf. Trong chỉ thị, chúng tôi đang đánh giá giá trị của thuộc tính appStatus. Vì giá trị của thuộc tính phải được đánh giá là true, điều đó có nghĩa là thẻ div sẽ được hiển thị trong trình duyệt.

Khi chúng tôi thêm mã trên, chúng tôi sẽ nhận được kết quả sau trong trình duyệt.

Đầu ra

ngFor

Các ngFor phần tử được sử dụng cho các phần tử dựa trên điều kiện của vòng lặp For.

Cú pháp

*ngFor = 'let variable of variablelist'

Biến là một biến tạm thời để hiển thị các giá trị trong variablelist.

Bây giờ chúng ta hãy xem một ví dụ về cách chúng ta có thể sử dụng chỉ thị * ngFor.

Step 1- Đầu tiên hãy thêm một thuộc tính vào lớp có tên appList. Đây sẽ là loại có thể được sử dụng để xác định bất kỳ loại mảng nào.

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"
   } ];
}

Do đó, chúng tôi đang định nghĩa appList là một mảng có 2 phần tử. Mỗi phần tử có 2 thuộc tính con là ID và Name.

Step 2 - Trong app.component.html, xác định mã sau.

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

Trong đoạn mã trên, chúng ta đang sử dụng chỉ thị ngFor để lặp qua mảng appList. Sau đó, chúng tôi xác định một danh sách trong đó mỗi mục danh sách là tham số ID và tên của mảng.

Khi chúng tôi thêm mã trên, chúng tôi sẽ nhận được kết quả sau trong trình duyệt.

Đầu ra