Angular 2 — Директивы

Angular 2 — Директивы

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

Если вы просмотрите файл app.module.ts, то увидите следующий код и модуль BrowserModule. Определив этот модуль, вы получите доступ к двум директивам.

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 = 'выражение'

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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 должен отображаться в браузере. После того, как мы добавим вышеприведенный код, мы получим в браузере следующий результат.

Вывод

Angular 2 — Директивы

ngFor

Элемент ngFor используется для элементов, исходя из оценки условия цикла For. Синтаксис

*ngFor = 'let variable of variablelist'

variable — это временная переменная для отображения значений в 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. Затем мы определяем список, в котором каждый элемент списка является идентификатором и параметром имени массива. После того, как мы добавим вышеприведенный код, мы получим в браузере следующий результат.

Вывод

Angular 2 — Директивы

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree