Від автора: в Angular компоненти є логічними фрагментами коду програми JS. Компонент складається з таких елементів, перерахованих нижче.
Шаблон використовується для візуалізації подання додатка. Він містить HTML-код, який потрібно відображати в додатку. Ця частина також включає зв’язку та директиви.
Клас — це клас, визначений на будь-якій мові, наприклад, C. Він містить властивості та методи. У класі міститься код, який використовується для підтримки подання. Він визначений в TypeScript.
Метадані — додаткові дані, визначені для класу Angular. Вони визначаються з допомогою декоратора.
Давайте перейдемо до файлу app.component.ts і створимо наш перший компонент Angular.
Давайте додамо наступний код у файл і докладно розглянемо кожен аспект.
Клас
Клас декоратора. Клас визначається TypeScript. Клас зазвичай має наступний синтаксис TypeScript.
Синтаксис
class classname {
Propertyname: PropertyType = Value
}
Параметри
Classname — це ім’я, яке повинно бути присвоєно класу.
Propertyname — це ім’я, яке повинно бути присвоєно властивості.
PropertyType. Оскільки TypeScript суворо типізований, вам потрібно вказати тип властивості.
Value — значення, яке має бути присвоєно властивості.
Приклад
export class AppComponent {
appTitle: string = ‘Welcome’;
}
У цьому прикладі:
Ми визначаємо клас з ім’ям AppComponent.
Ключове слово export використовується, щоб компонент міг використовуватися в інших модулях програми Angular JS.
appTitle — це ім’я властивості.
Властивості присвоюється тип string.
Властивості присвоюється значення ‘Welcome’.
Шаблон
Це подання, яке повинно відображатися в додатку.
Template:’
class properties
‘
HTML Code — це HTML-код, який потрібно відобразити у додатку.
Class властивості — це властивості класу, на які можна посилатися у шаблоні.
template:’
{{appTitle}}
‘
У цьому прикладі:
Ми визначаємо HTML-код, який буде відображатися в нашому додатку.
Ми також посилаємося на властивість appTitle з нашого класу.
Метадані
Вони використовуються для оформлення класу Angular JS за допомогою додаткової інформації. Давайте розглянемо закінчений код з класом, шаблоном і метаданими.
import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: `
{{appTitle}}
`,
})
export class AppComponent {
appTitle: string = ‘Welcome’;
}
У наведеному вище прикладі:
Ми використовуємо ключове слово import, щоб імпортувати декоратор ‘Component’ з модуля ядра.
Потім ми використовуємо декоратор для визначення компонента.
Компонент містить селектор, званий «my-app». Це не що інше, як наш користувацький тег html, який можна використовувати на головній html-сторінці.
Тепер перейдемо до файлу index.html в нашому коді.
Давайте переконаємося, що тег body тепер містить посилання на наш користувацький тег в компоненті. Тобто, в даному випадку нам потрібно перевірити, чи містить тег body наступний код:
Висновок
Тепер, якщо ми відкриємо файл у браузері, ми побачимо, що результат візуалізується так, як він визначений в компоненті.
