Создание нового компонента Angular

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

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

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

Angular2\ClientApp\app\components\shared\header

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

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

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

@Component({
    selector: 'header-component',
    templateUrl: './header.component.html'
})
export class HeaderComponent {
    name: string;
    constructor() {
        this.name = 'Sam';
    }
}

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

<header>
    <h1>Самая важная информация в заголовке</h1>
    <h3>Менее важная информация</h3>
    <p>Дополнительная информация</p>
</header>

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

import { HeaderComponent } from './components/shared/header/header.component';

declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent
],

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

<header-component></header-component>

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

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