Последнее обновление 06.01.2023 — Василий Иванов
Компонент является одним из наиболее важных строительных блоков приложения Angular. Компоненты — это многократно используемые фрагменты кода, которые составляют определенные разделы вашего сайта.
Примеры компонентов, которые вы можете создать, включают в себя более мелкие элементы пользовательского интерфейса, такие как кнопки или карточки. Они также могут включать в себя более крупные элементы пользовательского интерфейса, такие как боковые панели, панели навигации или целые страницы.
Использование компонентов в Angular
Когда вы создаете компоненты в приложении Angular, вы можете использовать их в других компонентах. Например, вы можете создать компонент для большого элемента карточки пользовательского интерфейса. Затем вы можете использовать этот компонент как обычный HTML-тег где угодно:
<app-new-component></app-new-component>
Поскольку компоненты представляют собой многократно используемые фрагменты кода, вы также можете передавать переменные, чтобы данные для каждого экземпляра были разными. Вы также можете создавать компоненты для страниц и соответствующим образом маршрутизировать их с помощью файла app-routing.module.ts.
Вы можете проектировать свои компоненты на основе структуры вашего приложения и того, насколько вы хотите разделить свою функциональность.
Как создать компонент
Вы можете использовать команду ng generate для создания нового компонента.
- Создайте новое приложение Angular с помощью ng new или откройте существующее.
- Откройте командную строку или терминал. В качестве альтернативы, если ваше приложение Angular открыто в среде IDE, такой как Visual Studio Code, вы можете использовать встроенный терминал.
- В терминале перейдите к расположению корневой папки проекта. Например:
cd C:\Users\Sharl\Desktop\Angular-Application
- Запустите команду ng generate component, а затем введите имя нового компонента:
ng generate component ui-card
- Новый компонент будет создан в новой папке внутри каталога src/app.
Как добавить контент в компонент Angular
Angular создает каждый компонент с помощью файла HTML, CSS, TypeScript и спецификации тестирования.
- В HTML-файле хранится HTML-содержимое компонента.
- В файле CSS хранится стиль компонента.
- В файле спецификации тестирования (spec.ts) хранятся все модульные тесты для компонента.
- Файл TypeScript хранит логику и функциональные возможности, определяющие компонент.
Добавьте некоторый контент в пользовательский компонент пользовательского интерфейса.
- Откройте src/app/ui-card/ui-card.component.html и обновите HTML-код компонента. Убедитесь, что у вас есть изображение с таким же именем в папке с именем src/assets/images в вашем приложении Angular. Замените содержимое ui-card.component.html следующим:
<div class="card">
<img src="./assets/images/blue-mountains.jpg" alt="Avatar">
<div class="container">
<h4 class="title"> Blue Mountains </h4>
<p> NSW, Australia </p>
</div>
</div> - Откройте ui-card.component.css и добавьте содержимое CSS в компонент:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 400px;
padding: 8px;
margin: 24px;
background-color: whitesmoke;
font-family: sans-serif;
}
.card img {
max-width: 400px;
}
.title {
padding-top: 16px;
}
.container {
padding: 2px 16px;
} - Файл ui-card.component.ts уже содержит класс для нового компонента, в который можно добавить новые функции, логику и функциональность. Это должно выглядеть так:
export class UiCardComponent implements OnInit {
constructor() { }
ngOnInit(): void {
// Add some code logic here
}
// Or, add your logic and functionality in new functions
}
Как использовать компонент в HTML другого компонента
Внутри ui-card.component.ts есть три атрибута: selector, templateUrl и styleUrl. templateUrl относится к HTML-коду компонента (и, следовательно, к HTML-файлу). Атрибут styleUrls относится к CSS компонента и ссылается на файл CSS.
@Component({
selector: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Когда вы используете компонент карты пользовательского интерфейса в другом компоненте, вы будете использовать имя селектора «app-ui-card».
- Сначала добавьте контент на свою веб-страницу. Откройте src/app/app.component.html и добавьте панель навигации:
<div class="navbar-header">
<a class="nav-title"><b> Web Navbar </b></a>
</div> - Добавьте стиль к панели навигации в src/app/app.component.css:
.navbar-header {
background-color: #07393C;
padding: 30px 50px;
display: flex;
align-items: center;
font-family: sans-serif;
}
.nav-title {
text-decoration: none;
color: white;
font-size: 16pt;
} - Под панелью навигации в app.component.html добавьте новую карточку пользовательского интерфейса. Используйте имя селектора «app-ui-card» в качестве тега HTML:
<app-ui-card> </app-ui-card>
- Вы также можете повторно использовать компонент, включив тег несколько раз. Для этого замените указанную выше строку на использование нескольких HTML-тегов app-ui-card:
<div style="display: flex">
<app-ui-card> </app-ui-card>
<app-ui-card> </app-ui-card>
<app-ui-card> </app-ui-card>
</div> - Запустите приложение Angular из терминала с помощью команды ng serve и откройте свой веб-сайт в веб-браузере.
Как передать входные параметры в компонент
Поскольку компонент можно использовать повторно, есть атрибуты, которые вы можете изменять каждый раз, когда используете его. В этом случае можно использовать входные параметры.
- Добавьте Input в список импорта вверху ui-card.component.ts:
import { Component, Input, OnInit } from '@angular/core'; - Затем добавьте две входные переменные в класс UICardComponent. Это позволит вам изменить название местоположения и изображение, которое отображается на карте. Заполните функцию ngOnInit, как показано, чтобы создать путь к изображению или используйте значение по умолчанию:
export class UiCardComponent implements OnInit {
@Input() locationName: string;
@Input() imageName: string;
constructor() { }
ngOnInit(): void {
if (this.imageName) {
this.imageName = "./assets/images/" + this.imageName;
} else {
this.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - В ui-card.component.html измените жестко запрограммированное значение «Голубые горы» в заголовке 4, чтобы вместо него использовалась входная переменная «locationName». Также измените жестко закодированный атрибут src в теге изображения, чтобы использовать входную переменную «imageName»:
<div class="card">
<img src="{{imageName}}" alt="Avatar">
<div class="container">
<h4 class="title">{{locationName ? locationName : 'Blue Mountains'}}</h4>
<p>NSW, Australia</p>
</div>
</div> - В app.component.html измените теги «app-ui-card», чтобы включить входные данные «locationName» и «imageName». Для каждого элемента карты пользовательского интерфейса введите другое значение. Убедитесь, что файлы изображений существуют в папке assets/images вашего приложения Angular.
<div style="display: flex">
<app-ui-card [locationName]="'Blue Mountains'" [imageName]="'blue-mountains.jpg'"> </app-ui-card>
<app-ui-card [locationName]="'Sydney'" [imageName]="'sydney.jpg'"> </app-ui-card>
<app-ui-card [locationName]="'Newcastle'" [imageName]="'newcastle.jpg'"> </app-ui-card>
</div> - Запустите приложение Angular из терминала с помощью команды ng serve и откройте свой веб-сайт в веб-браузере.
На этом этапе вы можете увидеть ошибку об отсутствии инициализатора у этих свойств. Если это так, просто добавьте или установите «strictPropertyInitialization»: false в свой tsconfig.json.
Как выполнить маршрут к новому компоненту
Если ваш компонент представляет большую часть вашего веб-сайта, например новую страницу, вы также можете перейти к этому компоненту.
- Откройте app-routing.module.ts. Импортируйте компонент карты пользовательского интерфейса в верхней части файла:
import { UiCardComponent } from './ui-card/ui-card.component'; - Добавьте путь маршрутизации в массив маршрутов:
const routes: Routes = [
// ... Any other routes you may need ...
{ path: 'uicard', component: UiCardComponent },
] - Замените весь текущий контент в app.component.html, включив в него только панель навигации и HTML-тег router-outlet. Router-outlet позволяет маршрутизировать между страницами. Добавьте гиперссылку на панель навигации с атрибутом href, соответствующим пути в массиве маршрутов:
<div class="navbar-header">
<a class="nav-title"><b> Web Navbar </b></a>
<a class="nav-a-link" href="/uicard"><b> UI Card </b></a>
</div>
<router-outlet></router-outlet> - Добавьте стиль к новой ссылке карты пользовательского интерфейса в app.component.css:
.nav-a-link {
text-decoration: none;
color: #4b6569;
font-size: 14pt;
margin-left: 60px;
font-weight: lighter;
} - Запустите приложение Angular из терминала с помощью команды ng serve и откройте свой веб-сайт в веб-браузере. Ссылка появится в панели навигации на веб-странице.
- Обратите внимание на URL-адрес в веб-браузере. По умолчанию это обычно http://localhost:4200/. Когда вы нажмете на ссылку карты пользовательского интерфейса, страница перенаправится на http://localhost:4200/uicard, и появится карта пользовательского интерфейса.
Создание компонентов в Angular
Компонент — это один из основных строительных блоков Angular. Компоненты позволяют разбивать различные разделы вашего веб-сайта на более мелкие, многократно используемые части. В компоненты можно превратить что угодно, в том числе кнопки меньшего размера, карточки, боковые панели большего размера и панели навигации.
Вы также можете использовать входные переменные для передачи данных между разными экземплярами компонента. И вы можете перейти к компоненту, используя URL-адреса.
Если вы разрабатываете новое приложение Angular, вам может понадобиться создать панель навигации, чтобы ваши пользователи могли перемещаться по вашим компонентам. Наличие адаптивной панели навигации позволяет просматривать ее на разных устройствах и экранах разного размера.
