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.