Создание компонента в Angular (с помощью CLI/ручно)


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

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> — имя вашего компонента.

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

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

  1. Перейдите в каталог вашего проекта Angular.
  2. Создайте новый файл <component-name>.component.ts.
  3. В верхней части файла добавьте следующий оператор импорта.

    content_copyimport {Component } from '@angular/core';
    
  4. После оператора import добавьте декоратор @[Component](https://angular.io/api/core/Component).

    content_copy@Component({
    })
    
  5. Выберите CSS-селектор для компонента.

    content_copy@Component({
      selector: 'app-component-overview',
    })
    

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

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

    content_copy@Component({
      selector: 'app-component-overview',
      templateUrl: './component-overview.component.html',
    })
    

    Дополнительные сведения об определении шаблона компонента см. в разделе Определение шаблона компонента.

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

    content_copy@Component({
      selector: 'app-component-overview',
      templateUrl: './component-overview.component.html',
      styleUrls: ['./component-overview.component.css']
    })
    
  8. Добавьте оператор class, который включает код компонента.

    content_copyexport class ComponentOverviewComponent {
    
    }
    

Ссылка : Обзор компонентов Angular

Оцените статью
devanswers.ru
Добавить комментарий