Учебники

Угловой 2 — Директивы

Октябрь 15, 2018

Директива — это пользовательский элемент HTML, который используется для расширения возможностей HTML. Angular 2 имеет следующие директивы, которые вызываются как часть модуля BrowserModule.

  • ngif
  • 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 используется для добавления элементов в код HTML, если он имеет значение true, иначе он не будет добавлять элементы в код HTML.

Синтаксис 

*ngIf = 'expression'

Если выражение оценивается как true, то добавляется соответствующий, иначе элементы не добавляются.

Давайте теперь посмотрим на пример того, как мы можем использовать директиву * ngif.

Шаг 1 — Сначала добавьте свойство в класс с именем appStatus. Это будет тип Boolean. Давайте сохраним это значение как истинное. 

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 и Имя.

Шаг 2. В app.component.html определите следующий код. 

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

В приведенном выше коде мы теперь используем директиву ngFor для итерации массива appList. Затем мы определяем список, в котором каждый элемент списка является параметром идентификатора и имени массива.

Как только мы добавим приведенный выше код, мы получим следующий вывод в браузере.

47
Share: