Компоновка компонентов

Вы научились обновлять шаблон, логику и стили компонента, но как использовать компонент в вашем приложении?

Свойство selector в конфигурации компонента задает имя, которое используется при обращении к компоненту в другом шаблоне. Вы используете selector как HTML-тег, например, app-user будет выглядеть как <app-user /> в шаблоне.

В этом упражнении вы узнаете, как компоновать компоненты.

В этом примере есть два компонента: User и App.

1. Add a reference to User

   Обновите шаблон App, чтобы включить ссылку на User, который использует селектор app-user. Обязательно добавьте User в массив imports компонента App, это сделает его доступным для использования в шаблоне App.

   template: `<app-user />`,
   imports: [User]

   Теперь компонент отображает сообщение Username: youngTech. Вы можете обновить код шаблона, чтобы включить больше разметки.

2. Add more markup

   Поскольку в шаблоне можно использовать любую HTML-разметку, попробуйте обновить шаблон для App, добавив больше HTML-элементов. В этом примере мы добавим элемент <section> в качестве родителя для элемента <app-user>.

   template: `<section><app-user /></section>`,

Вы можете использовать столько HTML-разметки и компонентов, сколько необходимо для реализации идеи вашего приложения. Вы даже можете разместить несколько копий вашего компонента на одной странице.

Это отличный переход к следующей теме: как условно отображать компонент на основе данных? Перейдите к следующему разделу, чтобы узнать.