Можете додати директиве у ХТМЛ у свом Ангулар пројекту. Неки контролишу структуру ваше ознаке, док се други фокусирају на атрибуте.
Овај чланак ће проћи кроз шест најчешћих Ангулар директива: нгФор, нгИф, нгЦласс, нгСтиле, нгМодел и нгСвитцх.
Шта су угаоне директиве?
Ангулар директиве вам омогућавају да користите иф наредбе и фор петље и додајете друго понашање ХТМЛ коду Ангулар пројекта.
| Директива | Опис |
|---|---|
| *нгИф | Можете користити нгИф када желите да се одређени ХТМЛ блокови приказују само ако испуњавају одређени услов. На пример, ако сте имали образац са искачућим прозором који се приказује након што је корисник унео унос за одређено поље. |
| *нгФор | Можете користити нгФор ако вам је потребан одређени блок да се понови много пута. На пример, ако сте имали листу ставки и требало је да прикажете див за сваку ставку. |
| *нгЦласс | Ово додаје условни стил коришћењем класе. Ако иф-наредба испуњава услов, примениће наведену класу. |
| *нгСтиле | Ово додаје условни ин-лине стил. Ако иф-наредба испуњава услов, примениће наведене стилове. |
| *нгМодел | Ово вам омогућава да извршите двосмерно везивање. То значи да можете прослеђивати податке у оба смера између ХТМЛ и ТипеСцрипт датотеке. На пример, можете проследити вредност атрибута из ТипеСцрипт датотеке у ХТМЛ датотеку и обрнуто. |
| *нгСвитцх | Ово вам омогућава да додате наредбу свитцх са много случајева да бисте проверили многе вредности. На основу случајева, одређени ХТМЛ елементи ће се приказати. |
Структурне директиве укључују структуру ХТМЛ елемената. То укључује нгИф, нгФор и нгСвитцх. Атрибутске директиве укључују промену својстава ХТМЛ елемената. То укључује нгСтиле, нгЦласс и нгМодел.
Како се користи нгИф
Да бисте користили нгИф, биће вам потребан услов за процену на истинито да би се одређени ХТМЛ елемент приказао.
- Додајте две променљиве у своју ТипеСцрипт датотеку. У овом примеру постоји променљива ноПлаилистс и променљива за чување плејлиста. Ова променљива ће бити тачна ако је дужина низа плејлиста 0.
ноПлаилистс: боолеан = фалсе;
плејлисте: било које = [];конструктор() { }
нгОнИнит(): воид {
иф (тхис.плаилистс.ленгтх 0) {
тхис.ноПлаилистс = труе;
}
} - У ХТМЛ додајте наредбу *нгИф. Ако је ноПлаилистс тачно, појавиће се порука о грешци садржана у распону испод. У супротном, неће. Можете применити нгИф на различите типове ХТМЛ ознаке.
Нема доступних плејлиста.
- Да бисте додали компоненту „елсе“ у иф-наредбу, мораћете да додате ХТМЛ код за део „елсе“ у блок шаблона.
Нема доступних плејлиста.
Пронађене су плејлисте.
Како користити нгФор
Ако треба да поновите одређени број блокова на страници, можете користити директиву нгФор.
- У датотеци ТипеСцрипт додајте ставке у низ.
плејлисте: било које = [
{"наме": "Роцк", "нумберОфСонгс": 5},
{"наме": "Цонтемпорари", "нумберОфСонгс": 9},
{"наме": "Популар", "нумберОфСонгс": 14},
{"наме": "Ацоустиц", "нумберОфСонгс": 3},
{"наме": "Веддинг Сонгс", "нумберОфСонгс": 25},
{"наме": "Метал", "нумберОфСонгс": 0},
]; - У ХТМЛ датотеци додајте наредбу *нгФор.
Унутар нгФор-а, моћи ћете да референцирате сваки објекат у низу користећи променљиву "плаилист". "плаилист.наме" и "плаилист.нумберОфСонгс" ће штампати оба атрибута унутар таг.Пронађене су плејлисте.
{{плаилист.наме}}
{{плаилист.нумберОфСонгс}} песама
Како користити нгЦласс
Можете да промените стилску класу коју користи одређени див, на основу услова.
- Додајте две класе у ЦСС датотеку са различитим стиловима. Можете додати било коју врсту ЦСС стил које желите, као што су различите боје позадине.
.сонгс {
бацкгроунд-цолор: #Ф7Ф5Ф2;
}
.ноСонгс {
бацкгроунд-цолор: #ФФА8А8;
} - У оквиру фор-петље из претходног корака додајте директиву атрибута нгЦласс. [нгЦласс]="плаилист.нумберОфСонгс > 0? 'сонгс': 'ноСонгс'" користи исто тернарни оператор који ЈаваСцрипт и други језици користе.
Ако је број песама већи од нуле, примениће класу „песме“ на див. Ово ће див дати сиву боју позадине. У супротном, ако је број песама нула, примениће класу "ноСонгс" на див. Ово ће див дати црвену боју позадине.
{{плаилист.наме}}
{{плаилист.нумберОфСонгс}} песама
Како се користи нгСтиле
Уместо да користите нгЦласс, можете користити нгСтиле ако желите да примените ин-лине стил уместо стилизовања преко класе.
- Промените нгЦласс из претходног корака да бисте уместо тога користили нгСтиле.
{{плаилист.наме}}
{{плаилист.нумберОфСонгс}} песама
[нгСтиле]="{'бацкгроунд-цолор': плаилист.нумберОфСонгс > 0? '#Ф7Ф5Ф2': '#ФФА8А8', 'боја': плаилист.нумберОфСонгс > 0? 'црна': 'тамноплава' }"
Како се користи нгМодел
Можете користити нгМодел за двосмерно везивање. То значи да можете пренети вредност атрибута између ХТМЛ и ТипеСцрипт датотека.
На пример, рецимо да имате елемент за унос у ХТМЛ датотеци који користи нгМодел. Атрибут нгМодел је везан за променљиву у датотеци ТипеСцрипт. Када унесете вредност у улаз, она ће ажурирати променљиву у датотеци ТипеСцрипт.
Промене унете у атрибут у ТипеСцрипт датотеци ће се такође одразити у ХТМЛ-у ако други див-ови користе ту променљиву.
- У апп.модуле.тс, додајте ФормсМодуле у импортове на врху датотеке, као и у низ импортова.
импорт { ФормсМодуле } из '@ангулар/формс';
@НгМодуле({
увози: [
...
ФормсМодуле
]
}) - Додајте атрибут у ТипеСцрипт датотеку да бисте пратили када корисник преименује листу песама.
преименовањеПлаилистс: боолеан = фалсе; - Учините променљиву листе песама јавном тако да јој се може приступити када користите нгМодел у ХТМЛ датотеци.
јавне листе песама: било које = [
...
]; - Додајте два дугмета у ХТМЛ датотеку, што ће вам омогућити да преименујете или откажете преименовање сваке листе песама.
- Додајте поље за унос унутар див сваке плејлисте. Унос ће бити видљив само када кликнете на Преименуј плејлисту дугме. Ово поље за унос ће имати нгМодел везан за „плаилист.наме“.
Када унесете ново име у поље за унос, плаилист.наме ће се ажурирати у ТипеСцрипт датотеци. Ово ће такође ажурирати друге дивове у ХТМЛ датотеци који користе плаилист.наме.
Како се користи нгСвитцх
Можете користити нгСвитцх да прикажете одређене елементе на основу случајева у случају прекидача.
- Додајте нови атрибут „оцењивање“ објектима унутар низа плејлиста. Овај атрибут може бити било који број између 0 и 5 (укључиво).
јавне листе песама: било које = [
{"наме": "Роцк", "нумберОфСонгс": 5, "ратинг": 5},
{"наме": "Цонтемпорари", "нумберОфСонгс": 9, "ратинг": 1},
{"наме": "Популар", "нумберОфСонгс": 14, "ратинг": 5},
{"наме": "Ацоустиц", "нумберОфСонгс": 3, "ратинг": 4},
{"наме": "Веддинг Сонгс", "нумберОфСонгс": 25, "ратинг": 5},
{"наме": "Метал", "нумберОфСонгс": 0, "ратинг": 0},
]; - Додајте слово за пребацивање испод имена и броја песама за листу песама. На основу броја оцене за плејлисту, листа за репродукцију ће приказати тачан број звездица.
{{плаилист.наме}}
{{плаилист.нумберОфСонгс}} песама
★★★★★★★★★★★★★★★Нема оцена
Сазнајте више уз Ангулар
Сада сте научили основе Ангулар директива, укључујући како да користите нгИф, нгФор, нгЦласс, нгСтиле, нгМодел и нгСвитцх. Можете их комбиновати да бисте креирали сложеније корисничке интерфејсе. Има још много тога за истраживање и учење о Ангулару, без обзира да ли сте почетник или сте на напредном нивоу.
Топ 8 Ангулар курсева за почетнике и напредне кориснике
Реад Нект
Повезане теме
- Програмирање
- Програмирање
- ЈаваСцрипт
- ХТМЛ
- ЦСС
О аутору
Шарлин је технички писац у МУО и такође ради пуно радно време у развоју софтвера. Она је дипломирани информатичар и има претходно искуство у области обезбеђења квалитета и универзитетског подучавања. Шарлин воли игре и свира клавир.
Претплатите се на наш билтен
Придружите се нашем билтену за техничке савете, рецензије, бесплатне е-књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили