Хуки AfterView и AfterContent
Выполняйте логику после инициализации представления и содержимого.
«Хуки AfterView и AfterContent» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Представление и содержимое
Angular различает представление компонента (его собственный шаблон) и содержимое, переданное в него через ng-content. Для каждого из них вызываются отдельные хуки.
AfterViewInit
Хук AfterViewInit выполняется один раз после полной инициализации представления компонента и его дочерних представлений. Это подходящий момент для доступа к дочерним элементам представления.
import { AfterViewInit } from "@angular/core";
export class DemoComponent implements AfterViewInit {
ngAfterViewInit(): void {
console.log("view ready");
}
}Доступ к ViewChild
Ссылка @ViewChild на элемент шаблона гарантированно доступна в ngAfterViewInit, но не раньше.
@ViewChild("input") input!: ElementRef;
ngAfterViewInit() {
this.input.nativeElement.focus();
}AfterViewChecked
Хук AfterViewChecked выполняется после каждой проверки представления компонента. Он вызывается часто, поэтому сводите выполняемую в нём работу к минимуму.
ngAfterViewChecked() {
// runs after each view check
}AfterContentInit
Хук AfterContentInit выполняется один раз после инициализации содержимого, переданного через ng-content.
import { AfterContentInit } from "@angular/core";
export class CardComponent implements AfterContentInit {
ngAfterContentInit() {
console.log("projected content ready");
}
}Доступ к ContentChild
Используйте @ContentChild, чтобы получить содержимое, переданное в компонент. Ссылка доступна в ngAfterContentInit.
@ContentChild(HeaderComponent) header!: HeaderComponent;
ngAfterContentInit() {
console.log(this.header);
}AfterContentChecked
Хук AfterContentChecked выполняется после каждой проверки переданного содержимого. Как и хук проверки представления, он вызывается часто.
Полный порядок хуков
Для компонента с входными параметрами и содержимым порядок таков: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.
// init sequence:
// OnChanges -> OnInit -> DoCheck
// -> AfterContentInit -> AfterContentChecked
// -> AfterViewInit -> AfterViewCheckedОшибка ExpressionChangedAfterChecked
Изменение связанных данных внутри ngAfterViewInit может вызвать известную ошибку ExpressionChangedAfterItHasBeenCheckedError. Откладывайте такие обновления, чтобы избежать её.
ngAfterViewInit() {
// defer to next tick to avoid the error
setTimeout(() => this.ready = true);
}Использование ViewChildren
@ViewChildren возвращает QueryList с несколькими подходящими элементами или компонентами, готовый в ngAfterViewInit.
@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;
ngAfterViewInit() {
console.log(this.items.length);
}Выбор подходящего хука
Используйте хуки AfterView для собственного шаблона, а хуки AfterContent — для переданного содержимого. Для одноразовой настройки предпочитайте варианты Init, а варианты Checked используйте только при необходимости.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли хуки представления и содержимого.
Итоги
Хуки AfterContent вызываются для переданного содержимого, а хуки AfterView — для собственного представления компонента. Варианты Init выполняются один раз, а варианты Checked — в каждом цикле. Используйте их для безопасного доступа к @ViewChild и @ContentChild.
Часто задаваемые вопросы
Урок «Хуки AfterView и AfterContent» бесплатный?
Да — полный текст урока «Хуки AfterView и AfterContent» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Хуки AfterView и AfterContent»?
Выполняйте логику после инициализации представления и содержимого. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Хуки AfterView и AfterContent»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- ngOnInit и инициализация
- ngOnChanges и изменения входных данных
- ngOnDestroy и очистка
- Хуки AfterView и AfterContent