Angular 2 - dyrektywy

ZA directiveto niestandardowy element HTML, który służy do rozszerzenia możliwości HTML. Angular 2 ma następujące dyrektywy, które są wywoływane jako część modułu BrowserModule.

  • ngif
  • ngFor

Jeśli wyświetlisz plik app.module.ts, zobaczysz następujący kod i zdefiniowany moduł BrowserModule. Definiując ten moduł, będziesz mieć dostęp do 2 dyrektyw.

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

Przyjrzyjmy się teraz szczegółowo każdej dyrektywie.

ngIf

Plik ngif element służy do dodawania elementów do kodu HTML, jeśli ma wartość true, w przeciwnym razie nie doda elementów do kodu HTML.

Składnia

*ngIf = 'expression'

Jeśli wynikiem wyrażenia jest prawda, to odpowiednie zostanie dodane, w przeciwnym razie elementy nie zostaną dodane.

Przyjrzyjmy się teraz przykładowi, jak możemy użyć dyrektywy * ngif.

Step 1- Najpierw dodaj właściwość do klasy o nazwie appStatus. Będzie to typ Boolean. Utrzymajmy tę wartość jako prawdziwą.

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 - Teraz w pliku app.component.html dodaj następujący kod.

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

W powyższym kodzie mamy teraz dyrektywę * ngIf. W dyrektywie oceniamy wartość właściwości appStatus. Ponieważ wartość właściwości powinna mieć wartość true, oznacza to, że znacznik DIV powinien być wyświetlany w przeglądarce.

Po dodaniu powyższego kodu w przeglądarce otrzymamy następujące dane wyjściowe.

Wynik

ngFor

Plik ngFor element jest używany do elementów opartych na warunku pętli For.

Składnia

*ngFor = 'let variable of variablelist'

Zmienna jest zmienną tymczasową do wyświetlania wartości w variablelist.

Przyjrzyjmy się teraz przykładowi, jak możemy użyć dyrektywy * ngFor.

Step 1- Najpierw dodaj właściwość do klasy o nazwie appList. Będzie to typ, którego można użyć do zdefiniowania dowolnego typu tablic.

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

Dlatego definiujemy appList jako tablicę, która ma 2 elementy. Każdy element ma 2 właściwości podrzędne, takie jak ID i Nazwa.

Step 2 - W pliku app.component.html zdefiniuj następujący kod.

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

W powyższym kodzie używamy dyrektywy ngFor do iteracji po tablicy appList. Następnie definiujemy listę, w której każdy element listy jest identyfikatorem i parametrem nazwy tablicy.

Po dodaniu powyższego kodu w przeglądarce otrzymamy następujące dane wyjściowe.

Wynik