Angular Academy · Урок

Прямой импорт зависимостей

Добавляйте импорты в компонент вместо модуля.

«Прямой импорт зависимостей» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Прямой импорт зависимостей

Автономный компонент объявляет используемые зависимости в собственном массиве imports. Это заменяет разделение объявлений и импортов в NgModule.

Массив imports

Добавляйте другие автономные компоненты, директивы и pipe в массив imports декоратора @Component.

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  imports: [ChildComponent],
  template: '<app-child></app-child>'
})
export class ParentComponent {}

Импорт других компонентов

Чтобы отобразить дочерний компонент в шаблоне, импортируйте его класс. После этого его селектор станет доступен.

Импорт директив

Автономные директивы импортируются таким же образом. После импорта их можно применять в шаблоне.

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-note',
  imports: [HighlightDirective],
  template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}

Импорт pipe

Автономные pipe также добавляются в imports. Например, импорт пользовательского pipe позволяет использовать его в интерполяции.

Распространённые директивы Angular

Некоторые встроенные средства поставляются в пакетах. Например, RouterLink импортируется из @angular/router, и его нужно импортировать перед использованием.

import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-nav',
  imports: [RouterLink],
  template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}

FormsModule и другие возможности

В автономный компонент можно импортировать и существующие NgModules. Импорт FormsModule включает возможности шаблонных форм, например ngModel.

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [FormsModule],
  template: '<input [(ngModel)]="name">'
})
export class FormComponent {
  name = '';
}

Встроенное управление потоком не требует импорта

Встроенные блоки управления потоком (if, for, switch, defer) являются частью самого языка шаблонов, поэтому не требуют импорта. Это отличается от старых структурных директив.

Импортируйте только используемое

Сократите imports до необходимого минимума: перечисляйте только те зависимости, на которые шаблон действительно ссылается. Так компоненты остаются компактными, а неиспользуемый код можно удалять при сборке.

Импорт нескольких элементов

В массиве imports можно перечислить сразу несколько элементов.

imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]

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

Если использовать не импортированный селектор или pipe, Angular сообщит понятную ошибку: этот элемент неизвестен данному компоненту. Добавьте его в imports, чтобы исправить проблему.

Быстрая проверка: импорты

Куда добавляются зависимости автономного компонента?

Итоги: прямые импорты

Автономные компоненты перечисляют зависимости в массиве imports компонента: другие компоненты, директивы, pipe и даже NgModules, например FormsModule. Встроенное управление потоком не требует импорта. Сохраняйте imports минимальным. Далее: запуск автономного приложения.

Часто задаваемые вопросы

Урок «Прямой импорт зависимостей» бесплатный?

Да — полный текст урока «Прямой импорт зависимостей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Прямой импорт зависимостей»?

Добавляйте импорты в компонент вместо модуля. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Прямой импорт зависимостей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy