Создание компонента с помощью 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>
— имя вашего компонента.
Создание компонента вручную
Чтобы создать новый компонент вручную:
- Перейдите в каталог вашего проекта Angular.
- Создайте новый файл
<component-name>.component.ts
. -
В верхней части файла добавьте следующий оператор импорта.
content_copyimport {Component } from '@angular/core';
-
После оператора
import
добавьте декоратор@[Component](https://angular.io/api/core/Component)
.content_copy@Component({ })
-
Выберите CSS-селектор для компонента.
content_copy@Component({ selector: 'app-component-overview', })
Дополнительную информацию о выборе селектора см. в разделе Указание селектора компонента.
-
Определите HTML-шаблон, который компонент использует для отображения информации. В большинстве случаев этот шаблон представляет собой отдельный HTML-файл.
content_copy@Component({ selector: 'app-component-overview', templateUrl: './component-overview.component.html', })
Дополнительные сведения об определении шаблона компонента см. в разделе Определение шаблона компонента.
-
Выберите стили для шаблона компонента. В большинстве случаев стили для шаблона компонента задаются в отдельном файле.
content_copy@Component({ selector: 'app-component-overview', templateUrl: './component-overview.component.html', styleUrls: ['./component-overview.component.css'] })
-
Добавьте оператор
class
, который включает код компонента.content_copyexport class ComponentOverviewComponent { }
Ссылка : Обзор компонентов Angular