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

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

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

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

Класс Angular 4

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

Параметры

  • Имя класса — это имя, которое будет присвоено классу.
  • Имя свойства — это имя, которое должно быть присвоено свойству.
  • PropertyType. Поскольку TypeScript строго типизирован, вам нужно указать тип свойства.
  • Значение — это значение, которое должно быть присвоено свойству.

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

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

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

Metadata

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

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

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

 

Leave a Reply

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