Angular 2 — Компоненти

2

Від автора: в Angular компоненти є логічними фрагментами коду програми JS. Компонент складається з таких елементів, перерахованих нижче.

Шаблон використовується для візуалізації подання додатка. Він містить HTML-код, який потрібно відображати в додатку. Ця частина також включає зв’язку та директиви.

Клас — це клас, визначений на будь-якій мові, наприклад, C. Він містить властивості та методи. У класі міститься код, який використовується для підтримки подання. Він визначений в TypeScript.

Метадані — додаткові дані, визначені для класу Angular. Вони визначаються з допомогою декоратора.

Давайте перейдемо до файлу app.component.ts і створимо наш перший компонент Angular.

Angular 2 — Компоненти

Давайте додамо наступний код у файл і докладно розглянемо кожен аспект.

Клас

Клас декоратора. Клас визначається 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}}

To Point Tutorials

У цьому прикладі:

Ми визначаємо HTML-код, який буде відображатися в нашому додатку.

Ми також посилаємося на властивість appTitle з нашого класу.

Метадані

Вони використовуються для оформлення класу Angular JS за допомогою додаткової інформації. Давайте розглянемо закінчений код з класом, шаблоном і метаданими.

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: `

{{appTitle}}

To Point Tutorials

`,
})
export class AppComponent {
appTitle: string = ‘Welcome’;
}

У наведеному вище прикладі:

Ми використовуємо ключове слово import, щоб імпортувати декоратор ‘Component’ з модуля ядра.

Потім ми використовуємо декоратор для визначення компонента.

Компонент містить селектор, званий «my-app». Це не що інше, як наш користувацький тег html, який можна використовувати на головній html-сторінці.

Тепер перейдемо до файлу index.html в нашому коді.

Angular 2 — Компоненти

Давайте переконаємося, що тег body тепер містить посилання на наш користувацький тег в компоненті. Тобто, в даному випадку нам потрібно перевірити, чи містить тег body наступний код:

Висновок

Тепер, якщо ми відкриємо файл у браузері, ми побачимо, що результат візуалізується так, як він визначений в компоненті.

Angular 2 — Компоненти