Angular 4 — Компоненты

Компонент логическая часть приложения на Angular 4. Компонент в Angular содержит:

  • Шаблон – Используеться для отображения. Содержит в себе HTML шаблон в котором отображаются данные приложения. Эта часть часто включает биндинг и дерективы.
  • Класс – Содержит логику вашего компонента.
  • Метаданные – Дополнительные данные для класса. Определяеться через декоратор

Давайте посмотрим на детали в коде:

Класс Angular 4

TypeScript класс декоратора. Класс обычно имеет следующий синтаксис.

class classname {
   Propertyname: PropertyType = Value
}

Параметры

  • Имя класса – это имя, которое будет присвоено классу.
  • Имя свойства – это имя, которое должно быть присвоено свойству.
  • PropertyType. Поскольку TypeScript строго типизирован, вам нужно указать тип свойства.
  • Значение – это значение, которое должно быть присвоено свойству.
export class AppComponent {
   appTitle: string = 'Welcome';
}

Синтаксис и параметры шаблона

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

В этом примере необходимо отметить следующее:

  • Мы определяем HTML-код, который будет отображаться в нашем приложении
  • Мы также ссылаемся на свойство appTitle из нашего класса.

Metadata

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Web Land</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

В приведенном выше примере необходимо отметить следующее:

  • Мы используем ключевое слово import, чтобы импортировать декоратор «Компонент» из ядра.
  • Затем мы используем декоратор для определения компонента.
  • У компонента есть селектор, называемый «my-app». Это не что иное, как наш пользовательский тег html, который можно использовать на нашей главной странице html.

Давайте проверим, что тег body теперь содержит ссылку на наш пользовательский тег в компоненте. Таким образом, в приведенном выше случае нам нужно убедиться, что тег body содержит следующий код –

<body>
   <my-app></my-app>
</body>

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.