От автора: в Angular компоненты являются логическими фрагментами кода приложения JS. Компонент состоит из следующих элементов, перечисленных ниже.
Шаблон — используется для визуализации представления приложения. Он содержит HTML-код, который нужно отображать в приложении. Эта часть также включает связи и директивы.
Класс — это класс, определенный на любом языке, например, C. Он содержит свойства и методы. В классе помещается код, который используется для поддержки представления. Он определен в TypeScript.
Метаданные — дополнительные данные, определенные для класса Angular. Они определяются с помощью декоратора.
Давайте перейдем в файл app.component.ts и создадим наш первый компонент Angular.
Давайте добавим следующий код в файл и подробно рассмотрим каждый аспект.
Класс
Класс декоратора. Класс определяется в TypeScript. Класс обычно имеет следующий синтаксис TypeScript.
Синтаксис
|
1 2 3 |
class classname { Propertyname: PropertyType = Value } |
Параметры
Classname — это имя, которое должно быть присвоено классу.
Propertyname — это имя, которое должно быть присвоено свойству.
PropertyType. Поскольку TypeScript строго типизирован, вам нужно указать тип свойства.
Value — это значение, которое должно быть присвоено свойству.
Пример
|
1 2 3 |
export class AppComponent { appTitle: string = 'Welcome'; } |
В этом примере:
Мы определяем класс с именем AppComponent.
Ключевое слово export используется, чтобы компонент мог использоваться в других модулях приложения Angular JS.
appTitle — это имя свойства.
Свойству присваивается тип string.
Свойству присваивается значение ‘Welcome’.
Шаблон
Это представление, которое должно отображаться в приложении.
|
1 2 3 4 |
Template: ' <HTML code> class properties ' |
HTML Code — это HTML-код, который необходимо отобразить в приложении.
Class properties — это свойства класса, на которые можно ссылаться в шаблоне.
|
1 2 3 4 5 6 |
template: ' <div> <h1>{{appTitle}}</h1> <div>To Tutorials Point</div> </div> ' |
В этом примере:
Мы определяем HTML-код, который будет отображаться в нашем приложении.
Мы также ссылаемся на свойство appTitle из нашего класса.
Метаданные
Они используются для оформления класса Angular JS с помощью дополнительной информации. Давайте рассмотрим законченный код с классом, шаблоном и метаданными.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: ` <div> <h1>{{appTitle}}</h1> <div>To Tutorials Point</div> </div> `, }) export class AppComponent { appTitle: string = 'Welcome'; } |
В приведенном выше примере:
Мы используем ключевое слово import, чтобы импортировать декоратор ‘Component’ из модуля ядра.
Затем мы используем декоратор для определения компонента.
Компонент содержит селектор, называемый «my-app». Это не что иное, как наш пользовательский тег html, который можно использовать на главной html-странице.
Теперь перейдем к файлу index.html в нашем коде.
Давайте удостоверимся, что тег body теперь содержит ссылку на наш пользовательский тег в компоненте. То есть, в данном случае нам нужно проверить, содержит ли тег body следующий код:
|
1 2 3 |
<body> <my-app></my-app> </body> |
Вывод
Теперь, если мы откроем файл в браузере, мы увидим, что результат визуализируется так, как он определен в компоненте.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
