Angular. ViewChild, ViewChildren, ContentChild и ContentChildren

Опубликовано в Angular • 14 февраля 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 pipe localization

Локализация angular pipe на русский язык

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

Angular параллельные и последовательные запросы на RxJS

forkJoin - параллельные запросы, mergeMap - последовательные запросы

Angular. Когда не надо отписываться в RxJS?

В async pipe за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно. Допускается не отписываться в потоках, где будет гарантировано вызван complete.

Про Angular Universal & Server-side rendering

ng add @nguniversal/express-engine --clientProject 
npm run build:ssr && npm run serve:ssr

Аналог Jasmine createSpyObj в Jest

// Jest
const serviceMock = {
 methods: jest.fn(),
 you: jest.fn(),
 want: jest.fn(),
 to: jest.fn(),
 mock: jest.fn()
};