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. Стилизация host элемента

Про :host, :host-context(selector) и :host-context(selector)

Angular. HTTP long polling

httpRequest.pipe(
  repeat(),
  takeUntil(stop$)
).subscribe(x => console.log(x));

Simple Angular Logger Service

Код из Logger Service с angular.io sources

Angular. Functions & getters в шаблонах

На каждый цикл механизма обнаружения изменений выполняется метод из шаблона. Если этого надо избежать, то следует использовать pure pipe или результат выполнения присвоить свойству компонента

Angular. DoCheck и KeyValueDiffers

KeyValueDiffers позволяет отслеживать мутации свойств объектов

Angular анимация для router-outlet

Быстрое создание router анимации, используя buildRouteTransition из ngx-animations