Компонентът е един от най-важните градивни елементи на приложение на Angular. Компонентите са битове код за многократна употреба, които съставляват определени секции от вашия уебсайт.
Примерите за компоненти, които можете да създадете, включват по-малки елементи на потребителския интерфейс, като бутони или карти. Те могат също да включват по-големи елементи на потребителския интерфейс като странични ленти, ленти за навигация или цели страници.
Използване на компоненти в Angular
Когато създавате компоненти в приложение на Angular, можете да ги използвате в други компоненти. Например, можете да създадете компонент за голям елемент на UI карта. След това можете да използвате този компонент като обикновен HTML маркер, където пожелаете:
<приложение-нов-компонент></app-new-component>Тъй като компонентите са битове код за многократна употреба, можете също да предавате променливи, така че данните за всеки екземпляр да са различни. Можете също така да създавате компоненти за страници и да насочвате към тях съответно с помощта на app-routing.module.ts файл.
Можете да проектирате вашите компоненти въз основа на структурата на вашето приложение и колко искате да отделите функционалността си.
Как да създадете компонент
Можете да използвате ngгенериране на команда за създаване на нов компонент.
- Създайте нов Ъглово приложение използвайки нов или отворете съществуващ.
- Отворете командния ред или терминала. Като алтернатива, ако имате своето приложение Angular отворено в an IDE като Visual Studio Code, можете да използвате вградения терминал.
- В терминала отидете до местоположението на главната папка на проекта. Например:
cd C:\Users\Sharl\Desktop\Angular-Application - Изпълнете ng генерира компонент команда, последвана от името на новия компонент:
ng генерира компонент ui-карта - Новият компонент ще бъде създаден в нова папка, вътре в src/приложение директория.
Как да добавите съдържание към ъгловия компонент
Angular създава всеки компонент с HTML, CSS, TypeScript и файл със спецификация за тестване.
- В HTML файл съхранява HTML съдържанието на компонента.
- В CSS файл съхранява стила на компонента.
- В Файл със спецификация за тестване (spec.ts). съхранява всички модулни тестове за компонента.
- В TypeScript файл съхранява логиката и функционалността, която дефинира компонента.
Добавете малко съдържание към персонализирания компонент на ui-карта.
- Отвори src/app/ui-card/ui-card.component.html, и актуализирайте HTML на компонента. Уверете се, че имате изображение със същото име в папка с име src/активи/изображения във вашето приложение Angular. Заменете съдържанието на ui-card.component.html със следното:
<div клас="карта">
<img src="./assets/images/blue-mountains.jpg" alt="Аватар">
<div клас="контейнер">
<h4 клас ="заглавие"> Сини планини </h4>
<стр> NSW, Австралия </стр>
</div>
</div> - Отвори ui-card.component.cssи добавете CSS съдържание към компонента:
.карта {
кутия-сянка: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
ширина: 400px;
подложка: 8px;
марж: 24px;
Цвят на фона: бял дим;
шрифтово семейство: без засечки;
}.картаимг {
максимална ширина: 400px;
}.заглавие {
padding-top: 16px;
}.контейнер {
подложка: 2px 16px;
} - В ui-card.component.ts файл вече съдържа клас за новия компонент, където можете да добавяте нови функции, логика и функционалност. Трябва да изглежда така:
износклас UiCardComponent инструменти OnInit {
конструктор() { }
ngOnInit(): нищожен {
// Добавете малко кодова логика тук
}
// Или добавете своята логика и функционалност в нови функции
}
Как да използвате компонента в HTML на друг компонент
Вътре ui-card.component.ts, има три атрибута: селектор, templateUrl и styleUrl. TemplateUrl се отнася до HTML на компонента (и следователно се свързва с HTML файла). Атрибутът styleUrls се отнася до CSS на компонента и се свързва с CSS файла.
@Компонент({
селектор: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Когато използвате компонента UI Card в друг компонент, ще използвате името на селектора "app-ui-card".
- Първо, добавете малко съдържание към вашата уеб страница. Отвори src/app/app.component.html и добавете навигационна лента:
<div клас="заглавка на навигационната лента">
<клас ="навигационно заглавие"><б> Уеб навигационна лента </б></a>
</div> - Добавете малко стил към вашата навигационна лента src/app/app.component.css:
.navbar-header {
Цвят на фона: #07393C;
подложка: 30px 50px;
дисплей: огъване;
подравняване на елементи: център;
шрифтово семейство: без засечки;
}.nav-title {
текст-украса: нито един;
цвят: бяло;
размер на шрифта: 16т;
} - Под навигационната лента в app.component.html, добавете нова UI карта. Използвайте името на селектора "app-ui-card" като HTML маркер:
<app-ui-карта></app-ui-card> - Можете също така да използвате повторно компонента, като включите етикета няколко пъти. За да направите това, заменете горния ред, за да използвате вместо това множество HTML тагове на app-ui-card:
<div style="дисплей: гъвкав">
<app-ui-карта></app-ui-card>
<app-ui-карта></app-ui-card>
<app-ui-карта></app-ui-card>
</div> - Стартирайте приложението си Angular от терминала с помощта на ng служи команда и отворете уебсайта си в уеб браузър.
Как да предадете входни параметри в компонента
Тъй като компонентът може да се използва повторно, има атрибути, които може да искате да промените всеки път, когато го използвате. В този случай можете да използвате входни параметри.
- Добавете Вход към списъка на вноса в горната част на ui-card.component.ts:
внос { Компонент, вход, OnInit } от '@ъглова/core'; - След това добавете две входни променливи вътре UICardComponent клас. Те ще ви позволят да промените името на местоположението и изображението, което се показва на картата. Попълнете ngOnInit функция, както е показано, за изграждане на пътя към изображението или използване на стойност по подразбиране:
износклас UiCardComponent инструменти OnInit {
@Вход() име на местоположение: низ;
@Вход() imageName: низ;конструктор() { }
ngOnInit(): нищожен {
ако (това.imageName) {
това.imageName = "./assets/images/" + това.imageName;
} друго {
това.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - В ui-card.component.html, променете твърдо кодираната стойност на заглавие 4 „Сините планини“, за да използвате вместо това входната променлива „locationName“. Също така сменете твърдо кодирания src атрибут в маркера на изображението, за да използвате входната променлива "imageName":
<div клас="карта">
<img src="{{imageName}}" alt="Аватар">
<div клас="контейнер">
<h4 клас ="заглавие">{{locationName? име на местоположение: 'Сини планини'}}</h4>
<стр>NSW, Австралия</стр>
</div>
</div> - В app.component.html, променете етикетите "app-ui-card", за да включват входовете "locationName" и "imageName". За всеки елемент на UI карта въведете различна стойност. Уверете се, че файловете с изображения съществуват в папката активи/изображения на вашето приложение Angular.
<div style="дисплей: гъвкав">
<app-ui-card [locationName]="'Сини планини'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Сидни'" [imageName]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Нюкасъл'" [imageName]="'newcastle.jpg'"></app-ui-card>
</div> - Стартирайте приложението си Angular от терминала с помощта на ng служи команда и отворете уебсайта си в уеб браузър.
В този момент може да видите грешка, че тези свойства нямат инициализатор. Ако е така, просто добавете или задайте "strictPropertyInitialization": false във вашия tsconfig.json.
Как да маршрутизирате към нов компонент
Ако вашият компонент представлява голяма част от вашия уебсайт, като например нова страница, тогава можете също да насочите към този компонент.
- Отвори app-routing.module.ts. Импортирайте компонента на UI картата в горната част на файла:
внос { UiCardComponent } от './ui-card/ui-card.component'; - Добавете маршрут за маршрут към масива с маршрути:
const маршрути: Маршрути = [
//... Всички други маршрути, от които може да се нуждаете...
{ път: 'uicard', компонент: UiCardComponent },
] - Заменете цялото текущо съдържание в app.component.html за да включите само навигационната лента и HTML маркер за изход на рутер. Изходът на рутера ви позволява да маршрутизирате между страниците. Добавете хипервръзка към лентата за навигация, като атрибутът href съответства на пътя в масива от маршрути:
<div клас="заглавка на навигационната лента">
<клас ="навигационно заглавие"><б> Уеб навигационна лента </б></a>
<клас ="nav-a-връзка" href="/uicard"><б> UI карта </б></a>
</div>
<рутер-изход></router-outlet> - Добавете малко стил към новата връзка на UI картата, в app.component.css:
.nav-a-link {
текст-украса: нито един;
цвят: #4b6569;
размер на шрифта: 14т;
поле вляво: 60px;
шрифт-тегло: по-лека;
} - Стартирайте приложението си Angular от терминала с помощта на ng служи команда и отворете уебсайта си в уеб браузър. Връзката ще се появи в лентата за навигация на уеб страницата.
- Обърнете внимание на URL адреса във вашия уеб браузър. По подразбиране обикновено е така http://localhost: 4200/. Когато щракнете върху връзката на UI картата, страницата ще се насочи към http://localhost: 4200/uicardи ще се появи UI картата.
Създаване на компоненти в Angular
Компонентът е един от основните градивни елементи на Angular. Компонентите ви позволяват да разделите различни секции от вашия уебсайт на по-малки части за многократна употреба. Можете да направите всичко в компоненти, включително по-малки бутони, карти, по-големи странични ленти и ленти за навигация.
Можете също да използвате входни променливи, за да предавате данни през различни екземпляри на компонента. И можете да насочите към компонента, като използвате URL пътеки.
Ако разработвате ново приложение на Angular, може да се наложи да изградите лента за навигация, за да могат вашите потребители да навигират през вашите компоненти. Наличието на отзивчива навигационна лента ви позволява да я преглеждате на различни устройства, на различни размери на екрана.
