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(...); } ``` ## 现代信号查询 ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## 为什么这很重要区分 `@ViewChild`（您的模板）和 `@ContentChild`（投影内容）— 以及它们各自的生命周期时序（`ngAfterViewInit` vs `ngAfterContentInit`）— 在构建需要与自己的模板元素或消费者投影到其中的内容进行交互的可复用组件时至关重要。这是一个常见的困惑点，也是在编写组件库、标签页、表单控件和必须与子元素协调的包装器时经常需要处理的问题。