Создание автономных компонентов
Объявляйте компоненты с флагом standalone.
«Создание автономных компонентов» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Создание автономного компонента
Автономный компонент — это обычный класс с декоратором @Component, помеченный как автономный. В Angular v19 и новее это значение по умолчанию, поэтому флаг часто даже не требуется указывать.
Флаг standalone
Раньше в декораторе задавали standalone: true. В v19 и более поздних версиях компоненты по умолчанию автономны, поэтому флаг необязателен.
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
standalone: true, // optional in v19+
template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}Селектор
selector — это тег пользовательского элемента, с помощью которого компонент размещается в шаблоне, например app-greeting.
// usage in another template:
// <app-greeting></app-greeting>Встроенный шаблон
Используйте свойство template для встроенного HTML — это удобно для небольших компонентов.
@Component({
selector: 'app-badge',
template: '<span class="badge">New</span>'
})
export class BadgeComponent {}Внешний шаблон
Для больших представлений используйте templateUrl, чтобы указать путь к HTML-файлу.
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html'
})
export class ProfileComponent {}Стили
Добавляйте стили компонента с ограниченной областью действия через styles (встроенные) или styleUrl / styleUrls (внешние файлы).
@Component({
selector: 'app-card',
template: '<div class="card"></div>',
styles: ['.card { padding: 16px; }']
})
export class CardComponent {}Логика класса компонента
Тело класса содержит состояние и поведение. С сигналами реактивное состояние объявляется как поля.
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
n = signal(0);
}Модуль не требуется
Обратите внимание: здесь нет @NgModule и массива declarations. Компонент готов к импорту в любом месте, где он нужен.
Соглашение об именовании файлов
По соглашению Angular файлы называются, например, greeting.component.ts, класс — GreetingComponent, а селектор — app-greeting.
Использование одного компонента внутри другого
Чтобы использовать дочерний автономный компонент, импортируйте его в массив imports родительского компонента (это рассматривается на следующем уроке) и разместите его селектор в шаблоне родителя.
Генерация с помощью CLI
Angular CLI по умолчанию создаёт автономные компоненты. Команда ng generate component greeting подготовит для вас автономный GreetingComponent.
Быстрая проверка: создание компонентов
Об автономных компонентах, создаваемых по умолчанию.
Итоги: создание автономного компонента
Вы создаёте автономный компонент с помощью @Component, при необходимости задавая standalone: true (это значение по умолчанию в v19 и новее). Вы определяете селектор, шаблон или templateUrl, необязательные стили и логику класса. NgModule не требуется. Далее: прямой импорт зависимостей.
Часто задаваемые вопросы
Урок «Создание автономных компонентов» бесплатный?
Да — полный текст урока «Создание автономных компонентов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание автономных компонентов»?
Объявляйте компоненты с флагом standalone. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Создание автономных компонентов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Зачем нужны автономные компоненты
- Создание автономных компонентов
- Прямой импорт зависимостей
- Запуск автономного приложения