Иерархическая декомпозиция – это идея, согласно которой мы делим пользовательский интерфейс приложения на отдельные блоки – компоненты. Каждый компонент в свою очередь состоит из других компонентов. И так далее, до тех пор, пока мы не дойдем до стандартных элементов, которые можно воспринимать как компоненты без поведения.

Для удобства и ускорения работы я рекомендую использовать расширение для Microsoft Visual Studio 2017 Angular 2 Snippet Pack. Оно предоставляет наборы готовых для использования типичных кусков кода, что позволяет писать код быстрее и допускать меньшее количество ошибок. Расширение абсолютно бесплатное и предоставляется через Visual Studio Marketplace.

Для начала создадим в соответствии с соглашениями именования Angular папку shared. А в ней соответственно папку для нашего компонента header.

Далее, внутри созданной папки header необходимо создать два файла header.component.html и header.component.ts.

Create folder

Create folder

Зайдем в файл header.component.ts и начнем редактировать. Для начала если установлено расширения нам достаточно ввести ng2component и нажать два раза клавишу TAB. Будет сгенерирован шаблон компонента. Изменим его и приведем к следующему виду:

Теперь изменим файл header.component.html, добавив в него следующие данные:

Теперь нам нужно зарегистрировать наш компонент в app.shared.module.ts. Для этого добавим строчку с импортом нашего компонента в начале файла, и в секции declarations.

app.shared.module.ts

app.shared.module.ts

Теперь нам осталось только вызвать наш компонент в приложении. Для этого изменим файл app.component.html следующим образом:

После этого компилируем наше приложение нажатием клавиши F5 и получаем следующий результат:

header component result

header component result

Если необходимо добавить какие-либо ресурсы, такие как изображения, то их необходимо поместить в папку wwwroot. Там же находится файл .ico – иконки приложения.

Add resouces

Add resouces

 

shwan

Программист .NET

×
%d такие блоггеры, как: