Angular. ViewChild, ViewChildren, ContentChild и ContentChildren

Опубликовано в Angular • 13 февраля 2019 г. • 1 мин. на чтение

Angular предоставляет 4 декоратора свойств @ViewChildren, @ViewChild, @ContentChildren и @ContentChild для доступа к дочерним элементам:

@ViewChild - querySelector
@ViewChildren - querySelectorAll
@ContentChild - querySelector внутри <ng-content>
@ContentChildren - querySelectorAll внутри <ng-content>

viewchildren-viewchild-contentchildren-and-contentchild

<todo-input> и <todo-item> рассматривается как ViewChildren <todo-app>
<app-footer> (если он определен как Angular компонент или директива) рассматривается как ContentChild.

ViewChild и ViewChildren доступны в хуке ngAfterViewInit
ContentChild и ContentChildren доступны в хуке ngAfterContentInit

Understanding @ViewChildren, @ViewChild, @ContentChildren and @ContentChild

Похожие записи

Пример Angular Interceptors

Пример приложения angular, использующее interceptors

Error: Cannot find module '@angular-devkit/core' - after clean install

Решение проблемы - установка новой версии @angular/cli

Создание custom form field control (ControlValueAccessor)

Вкратце об writeValue & registerOnChange, пример простого кастомного контрола формы.

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).

Angular environment service

Использование сервиса для окружения вместо прямой ссылки на environment.ts

Angular. Вставить компонент в body

Сервис для динамического добавления Angular компонентов в body