Компонента је један од најважнијих градивних блокова Ангулар апликације. Компоненте су делови кода за вишекратну употребу који чине одређене делове ваше веб локације.

Примери компоненти које можете да креирате укључују мање елементе корисничког интерфејса као што су дугмад или картице. Они такође могу укључити веће елементе корисничког интерфејса као што су бочне траке, траке за навигацију или целе странице.

Коришћење компоненти у Ангулар-у

Када креирате компоненте у Ангулар апликацији, можете их користити у оквиру других компоненти. На пример, можете креирати компоненту за велики елемент УИ картице. Затим можете да користите ову компоненту као обичну ХТМЛ ознаку, где год желите:

<апп-нев-цомпонент></app-new-component>

Пошто су компоненте вишекратно употребљиви битови кода, такође можете проследити променљиве тако да подаци за сваку инстанцу буду различити. Такође можете креирати компоненте за странице и можете их усмеравати у складу са тим помоћу апп-роутинг.модуле.тс фајл.

Можете дизајнирати своје компоненте на основу структуре ваше апликације и колико желите да одвојите своју функционалност.

instagram viewer

Како направити компоненту

Можете користити нггенерише команду да направите нову компоненту.

  1. Створити нова Угаона апликација Користећи нг нев или отворите постојећи.
  2. Отворите командну линију или терминал. Алтернативно, ако имате отворену Ангулар апликацију у ан ИДЕ као што је Висуал Студио Цоде, можете користити уграђени терминал.
  3. У терминалу идите до локације коренске фасцикле пројекта. На пример:
    цд Ц:\Усерс\Схарл\Десктоп\Ангулар-Апплицатион
  4. Покренути компонента нг гене команда, праћена именом нове компоненте:
    нг генерише компоненту уи-картице
  5. Нова компонента ће бити креирана у новој фасцикли, унутар срц/апп именик.

Како додати садржај угаоној компоненти

Ангулар креира сваку компоненту са ХТМЛ, ЦСС, ТипеСцрипт и датотеком спецификације тестирања.

  • Тхе ХТМЛ фајл чува ХТМЛ садржај компоненте.
  • Тхе ЦСС фајл чува стил компоненте.
  • Тхе Датотека спецификације тестирања (спец.тс). чува све тестове јединице за компоненту.
  • Тхе ТипеСцрипт датотека складишти логику и функционалност која дефинише компоненту.

Додајте мало садржаја прилагођеној компоненти уи-картице.

  1. Отвори срц/апп/уи-цард/уи-цард.цомпонент.хтмл, и ажурирајте ХТМЛ компоненте. Уверите се да имате слику са истим именом у фасцикли под називом срц/активе/слике у вашој Ангулар апликацији. Замените садржај уи-цард.цомпонент.хтмл са следећим:
    <див цласс="картица">
    <имг срц="./ассетс/имагес/блуе-моунтаинс.јпг" алт="Аватар">
    <див цласс="контејнер">
    <х4 цласс="наслов"> Плаве планине </h4>
    <стр> НСВ, Аустралија </п>
    </div>
    </div>
  2. Отвори уи-цард.цомпонент.цсс, и додајте ЦСС садржај компоненти:
    .картица {
    кутија-сенка: 0 4пк 8пк 0 ргба(0, 0, 0, 0.2);
    ширина: 400пк;
    паддинг: 8пк;
    маргина: 24пк;
    боја позадине: Бели дим;
    породица фонтова: Санс Сериф;
    }
    .картицаимг {
    максимална ширина: 400пк;
    }
    

    .титле {
    паддинг-топ: 16пк;
    }
    .контејнер {
    паддинг: 2пк 16пк;
    }
  3. Тхе уи-цард.цомпонент.тс датотека већ садржи класу за нову компоненту у коју можете додати нове функције, логику и функционалност. Требало би да изгледа овако:
    извозкласа УиЦардЦомпонент имплементира ОнИнит {
    конструктор() { }
     нгОнИнит(): празнина {
    // Додајте мало логике кода овде
     }
    // Или додајте своју логику и функционалност у нове функције
    }

Како користити компоненту у ХТМЛ-у друге компоненте

У уи-цард.цомпонент.тс, постоје три атрибута: селектор, темплатеУрл и стилеУрл. ТемплатеУрл се односи на ХТМЛ компоненте (и стога повезује са ХТМЛ датотеком). Атрибут стилеУрлс се односи на ЦСС компоненте и повезује се са ЦСС датотеком.

@Саставни део({
 селектор: 'апп-уи-цард',
 темплатеУрл: './уи-цард.цомпонент.хтмл',
 стилеУрлс: ['./уи-цард.цомпонент.цсс']
})

Када користите компоненту УИ картице у другој компоненти, користићете име селектора "апп-уи-цард".

  1. Прво додајте неки садржај на своју веб страницу. Отвори срц/апп/апп.цомпонент.хтмл и додајте навигациону траку:
    <див цласс="навбар-хеадер">
    <а цласс="нав-наслов"><б> Веб Навбар </б></а>
    </div>
  2. Додајте мало стила својој навигационој траци срц/апп/апп.цомпонент.цсс:
    .навбар-хеадер {
    боја позадине: #07393Ц;
    паддинг: 30пк 50пк;
    приказ: флек;
    алигн-итемс: центар;
    породица фонтова: Санс Сериф;
    }
    .нав-титле {
    текст-декорација: ниједан;
    боја: бео;
    фонт-сизе: 16пт;
    }
  3. Испод траке за навигацију у апп.цомпонент.хтмл, додајте нову УИ картицу. Користите име селектора „апп-уи-цард“ као ХТМЛ ознаку:
    <апп-уи-цард></app-ui-card>
  4. Такође можете поново користити компоненту укључивањем ознаке више пута. Да бисте то урадили, замените горњи ред да бисте уместо тога користили више ХТМЛ ознака апп-уи-цард:
    <див стиле="дисплеј: флекс">
    <апп-уи-цард></app-ui-card>
    <апп-уи-цард></app-ui-card>
    <апп-уи-цард></app-ui-card>
    </div>
  5. Покрените своју Ангулар апликацију са терминала користећи нг служе команду и отворите своју веб локацију у веб претраживачу.

Како проследити улазне параметре у компоненту

Пошто је компонента поново употребљива, постоје атрибути које ћете можда желети да промените сваки пут када је користите. У овом случају можете користити улазне параметре.

  1. Додати Улазни на листу увоза на врху уи-цард.цомпонент.тс:
    увоз { Компонента, Улаз, ОнИнит } из '@ангулар/core';
  2. Затим додајте две улазне варијабле унутар УИЦардЦомпонент класа. Ово ће вам омогућити да промените назив локације и слику која се приказује на картици. Попуне тхе нгОнИнит функција као што је приказано, да направите путању до слике или користите подразумевану вредност:
    извозкласа УиЦардЦомпонент имплементира ОнИнит {
    @Улазни() назив локације: низ;
    @Улазни() имагеНаме: низ;
    конструктор() { }
     нгОнИнит(): празнина {
    ако (ово.имагеНаме) {
    ово.имагеНаме = "./ассетс/имагес/" + ово.имагеНаме;
     } друго {
    ово.имагеНаме = "./ассетс/имагес/блуе-моунтаинс.јпг";
     }
     }
    }
  3. У уи-цард.цомпонент.хтмл, промените чврсто кодирану вредност „Плаве планине“ наслова 4 да бисте уместо ње користили улазну променљиву „лоцатионНаме“. Такође промените хард код срц атрибут у ознаци слике да бисте користили улазну променљиву „имагеНаме“:
    <див цласс="картица">
    <имг срц="{{имагеНаме}}" алт="Аватар">
    <див цласс="контејнер">
    <х4 цласс="наслов">{{назив локације? назив локације: 'Плаве планине'}}</h4>
    <стр>НСВ, Аустралија</п>
    </div>
    </div>
  4. У апп.цомпонент.хтмл, измените ознаке „апп-уи-цард“ тако да укључују уносе „лоцатионНаме“ и „имагеНаме“. За сваки елемент УИ картице унесите другачију вредност. Уверите се да датотеке слика постоје у фасцикли имовине/слике ваше Ангулар апликације.
    <див стиле="дисплеј: флекс">
    <апп-уи-цард [лоцатионНаме]="'Плаве планине'" [имагеНаме]="'блуе-моунтаинс.јпг'"></app-ui-card>
    <апп-уи-цард [лоцатионНаме]="'Сиднеи'" [имагеНаме]="'сиднеи.јпг'"></app-ui-card>
    <апп-уи-цард [лоцатионНаме]="'Невцастле'" [имагеНаме]="'невцастле.јпг'"></app-ui-card>
    </div>
  5. Покрените своју Ангулар апликацију са терминала користећи нг служе команду и отворите своју веб локацију у веб претраживачу.

Можда ћете у овом тренутку видети грешку да ова својства немају иницијализатор. Ако јесте, само додајте или поставите "стрицтПропертиИнитиализатион": нетачно у вашем тсцонфиг.јсон.

Како рутирати до нове компоненте

Ако ваша компонента представља велики део ваше веб локације, као што је нова страница, можете и да усмерите до те компоненте.

  1. Отвори апп-роутинг.модуле.тс. Увезите компоненту УИ картице на врх датотеке:
    увоз { УиЦардЦомпонент } из './уи-цард/уи-цард.цомпонент';
  2. Додајте путању за рутирање у низ рута:
    конст руте: Руте = [
    //... Било које друге руте које вам могу затребати...
     {пут: 'уицард', компонента: УиЦардЦомпонент },
    ]
  3. Замените сав тренутни садржај у апп.цомпонент.хтмл да укључује само навигациону траку и ХТМЛ ознаку излаза рутера. Рутер-оутлет вам омогућава рутирање између страница. Додајте хипервезу на навигациону траку, са атрибутом хреф који одговара путањи у низу рута:
    <див цласс="навбар-хеадер">
    <а цласс="нав-наслов"><б> Веб Навбар </б></а>
    <а цласс="нав-а-линк" хреф="/uicard"><б> УИ картица </б></а>
    </div>
    <рутер-утичница></router-outlet>
  4. Додајте мало стила новој вези УИ картице, у апп.цомпонент.цсс:
    .нав-а-линк {
    текст-декорација: ниједан;
    боја: #4б6569;
    фонт-сизе: 14пт;
    маргин-лево: 60пк;
    фонт-веигхт: упаљач;
    }
  5. Покрените своју Ангулар апликацију са терминала користећи нг служе команду и отворите своју веб локацију у веб претраживачу. Веза ће се појавити на траци за навигацију на веб страници.
  6. Обратите пажњу на УРЛ адресу у свом веб претраживачу. Подразумевано, обично је http://localhost: 4200/. Када кликнете на везу УИ картице, страница ће се усмерити ка http://localhost: 4200/уицард, и појавиће се УИ картица.

Креирање компоненти у Ангулар-у

Компонента је један од главних градивних блокова Ангулар-а. Компоненте вам омогућавају да разбијете различите делове ваше веб странице на мање делове за вишекратну употребу. Можете направити било шта у компоненте, укључујући мања дугмад, картице, веће бочне траке и траке за навигацију.

Такође можете да користите улазне променљиве за прослеђивање података различитим инстанцама компоненте. И можете да усмерите до компоненте користећи УРЛ путање.

Ако развијате нову Ангулар апликацију, можда ћете морати да направите траку за навигацију како би се корисници кретали кроз ваше компоненте. Поседовање навигационе траке са одзивом омогућава вам да је видите на различитим уређајима, на различитим величинама екрана.