Ответ
ContentChild — это декоратор в Angular, который позволяет получить доступ к дочернему элементу или директиву из шаблона (контентного проекции) внутри компонента.
Пример:
import { Component, ContentChild, AfterContentInit } from '@angular/core';
@Component({
selector: 'app-parent',
template: `<ng-content></ng-content>`
})
export class ParentComponent implements AfterContentInit {
@ContentChild('childRef') childElement: any;
ngAfterContentInit() {
console.log(this.childElement); // Элемент с #childRef
}
}Использование в шаблоне:
<app-parent>
<div #childRef>Проецируемый контент</div>
</app-parent>Особенности:
- Работает только с элементами, спроецированными через
<ng-content>. - Доступен после
ngAfterContentInit. - Если элемент не найден, вернёт
undefined. - Для нескольких элементов используй
@ContentChildren.
Ответ 18+ 🔞
Слушай, а вот есть в Angular такая штука — ContentChild. Ну, декоратор такой. Представь себе: ты делаешь компонент-родитель, куда можно запихнуть любую хуйню через <ng-content>. А потом тебе вдруг позарез нужно внутри родителя потрогать эту самую запихнутую хуйню — конкретный дивчик или какую-нибудь директиву. Вот для этого он и нужен, этот ContentChild. Как будто ты кричишь: «Эй, ты там, с референсом #childRef, выйди, сука, на разговор!»
Смотри, как это выглядит в коде:
import { Component, ContentChild, AfterContentInit } from '@angular/core';
@Component({
selector: 'app-parent',
template: `<ng-content></ng-content>`
})
export class ParentComponent implements AfterContentInit {
@ContentChild('childRef') childElement: any; // Вот тут мы его подлавливаем
ngAfterContentInit() {
console.log(this.childElement); // И вот тут он уже доступен, можно делать с ним что хочешь
}
}А в шаблоне это используется вот так, просто пиздец как интуитивно:
<app-parent>
<div #childRef>Вот эту вот хрень я и хочу достать изнутри родителя</div>
</app-parent>Но есть, блядь, важные нюансы, чтобы не обосраться:
- Работает ТОЛЬКО с тем, что просунуто через
<ng-content>. Если элемент просто лежит в шаблоне самого компонента — нихуя не получится, это ужеViewChild. - Доступ к этому элементу появляется только после хука
ngAfterContentInit. Раньше пытаться — это как искать водку в пустом холодильнике в три ночи:undefinedи разочарование. - Если ты ошибся референсом или элемент не спроецировали — получишь
undefined. Никаких «ой, всё» — просто пизда. - А если там таких элементов несколько, то тебе нужен уже
@ContentChildren.ContentChild— он для одного, любимого, так сказать.
Вот и вся магия. Не ебёшь мозг, а просто говоришь Angular: «Дай-ка мне вон ту штуку, которую пользователь в меня запихал», и он даёт. Главное — вовремя спросить.