Перейти к содержанию

Обзор компонентов Angular

Компоненты — это основной строительный блок для приложений Angular. Каждый компонент состоит из:

  • HTML-шаблона, который определяет, что отображается на странице.
  • класса TypeScript, определяющего поведение
  • CSS-селектор, определяющий, как компонент используется в шаблоне.
  • Опционально, стили CSS, применяемые к шаблону.

В этой теме описывается, как создать и настроить компонент Angular.

Для просмотра или загрузки кода примера, использованного в этой теме, см. пример.

Предварительные условия

Чтобы создать компонент, убедитесь, что вы выполнили следующие предварительные условия:

  1. Установите Angular CLI.

  2. Создайте рабочее пространство Angular с начальным приложением.

    Если у вас нет проекта, создайте его с помощью команды ng new <project-name>, где <project-name> — имя вашего приложения Angular.

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

Лучший способ создания компонента — это использование Angular CLI. Вы также можете создать компонент вручную.

Создание компонента с помощью Angular CLI

Чтобы создать компонент с помощью Angular CLI, выполните следующие действия:

  1. В окне терминала перейдите в каталог, содержащий ваше приложение.
  2. Выполните команду ng generate component <component-name>, где <component-name> — это имя вашего нового компонента.

По умолчанию эта команда создает следующее:

  • каталог с именем компонента
  • Файл компонента, `.component.ts'
  • Файл шаблона, <component-name>.component.html
  • CSS-файл, <component-name>.component.css
  • Файл спецификации тестирования, <component-name>.component.spec.ts.

Где <component-name> — имя вашего компонента.

Вы можете изменить, как ng generate component создает новые компоненты.

Создание компонента вручную

Хотя Angular CLI является лучшим способом создания компонента Angular, вы также можете создать компонент вручную. В этом разделе описано, как создать файл основного компонента в существующем проекте Angular.

Чтобы создать новый компонент вручную:

  1. Перейдите в каталог проекта Angular.

  2. Создайте новый файл <component-name>.component.ts.

  3. В верхней части файла добавьте следующий оператор импорта.

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

  4. После оператора import добавьте декоратор @Component.

    1
2
    @Component({
})

  5. Выберите CSS-селектор для компонента.

    1
2
3
    @Component({
    selector: 'app-component-overview',
})

    Для получения дополнительной информации о выборе селектора смотрите "Указание селектора компонента".

  6. Определите HTML-шаблон, который компонент использует для отображения информации.

    В большинстве случаев этот шаблон представляет собой отдельный HTML-файл.

    1
2
3
4
    @Component({
    selector: 'app-component-overview',
    templateUrl: './component-overview.component.html',
})

    Для получения дополнительной информации об определении шаблона компонента смотрите "Определение шаблона компонента".

  7. Выберите стили для шаблона компонента.

    В большинстве случаев стили для шаблона компонента задаются в отдельном файле.

    1
2
3
4
5
    @Component({
    selector: 'app-component-overview',
    templateUrl: './component-overview.component.html',
    styleUrls: ['./component-overview.component.css']
})

  8. Добавьте оператор class, включающий код компонента.

    1
    export class ComponentOverviewComponent {}

Указание CSS-селектора компонента

Каждый компонент требует наличия CSS-селектора. Селектор предписывает Angular инстанцировать этот компонент везде, где он найдет соответствующий тег в HTML шаблона. Например, рассмотрим компонент hello-world.component.ts, который определяет свой селектор как app-hello-world.

Этот селектор предписывает Angular инстанцировать этот компонент каждый раз, когда в шаблоне появляется тег <app-hello-world>.

Укажите селектор компонента, добавив оператор selector в декоратор @Component.

1
2
3
@Component({
  selector: 'app-component-overview',
})

Определение шаблона компонента

Шаблон — это блок HTML, который указывает Angular, как отобразить компонент в вашем приложении. Определите шаблон для вашего компонента одним из двух способов: ссылкой на внешний файл или непосредственно в компоненте.

Чтобы определить шаблон как внешний файл, добавьте свойство templateUrl к декоратору @Component.

1
2
3
4
@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

Чтобы определить шаблон внутри компонента, добавьте свойство template к декоратору @Component, содержащее HTML, который вы хотите использовать.

1
2
3
4
@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
})

Если вы хотите, чтобы ваш шаблон охватывал несколько строк, используйте обратные знаки (`). Например:

1
2
3
4
5
6
7
@Component({
  selector: 'app-component-overview',
  template: `
    <h1>Hello World!</h1>
    <p>This template definition spans multiple lines.</p>
  `
})

Компонент Angular требует шаблона, определенного с помощью template или templateUrl. Вы не можете иметь оба утверждения в компоненте.

Объявление стилей компонента

Объявите стили компонента, используемые для его шаблона, одним из двух способов: Ссылаясь на внешний файл, или непосредственно в компоненте.

Чтобы объявить стили для компонента в отдельном файле, добавьте свойство styleUrls к декоратору @Component.

1
2
3
4
5
@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

Чтобы объявить стили внутри компонента, добавьте свойство styles к декоратору @Component, содержащему стили, которые вы хотите использовать.

1
2
3
4
5
@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

Свойство styles принимает массив строк, содержащих объявления правил CSS.

Следующие шаги

📅 28.02.2022

Комментарии