В чём заключается различие между ViewChild и ContentChild?

Question

Accepted Answer

Обе директивы ищут ссылки на дочерние элементы/компоненты, но смотрят в **разных местах**: **`@ViewChild`** ищет в *собственном шаблоне* компонента, а **`@ContentChild`** ищет содержимое, **спроецированное в** компонент через ``. ## @ViewChild — поиск в собственном шаблоне ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // by template ref @ViewChild(ChildComponent) child!: ChildComponent; // by component type ngAfterViewInit() { this.input.nativeElement.focus(); // available after the VIEW initializes this.child.doSomething(); // call a child component's method } } ``` `@ViewChild` получает доступ к элементам/компонентам, которые сам компонент объявляет в своём шаблоне — доступно в **`ngAfterViewInit`**. ## @ContentChild — поиск в спроецированном содержимом ```ts @Component({ selector: "app-card", template: `

`, // content projected here }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // the projected content is ready here (EARLIER than ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild` получает доступ к содержимому, которое **передал родитель** (спроецировано через ``) — доступно в **`ngAfterContentInit`**. ## Ключевое различие ```text @ViewChild → elements in THIS component's own template → ngAfterViewInit @ContentChild → elements PROJECTED in from the parent → ngAfterContentInit (plural: @ViewChildren / @ContentChildren return a QueryList of all matches) ``` ## Множественные версии ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Современные запросы через signals ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Почему это важно Различие между `@ViewChild` (ваш шаблон) и `@ContentChild` (спроецированное содержимое) — и их соответствующие времена жизни (`ngAfterViewInit` vs `ngAfterContentInit`) — является критически важным при создании переиспользуемых компонентов, которые должны взаимодействовать со своими собственными элементами шаблона или содержимым, спроецированным в них потребителями. Это частый источник путаницы и часто требуется при разработке библиотек компонентов, вкладок, элементов управления формами и обёрток, которые должны координировать работу с дочерними элементами.