ViewChild 和 ContentChild 之间有什么区别？

@Component({
  template: `
    <input #nameInput />          <!-- a template reference in MY template -->
    <app-child></app-child>
  `,
})
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
  }
}

@Component({
  selector: "app-card",
  template: `<div class="card"><ng-content></ng-content></div>`, // 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);
  }
}

<!-- parent projects content INTO app-card -->
<app-card>
  <app-card-title>Hello</app-card-title>  <!-- this is what ContentChild finds -->
</app-card>

@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)

@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>; // all matching items
ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); }

input = viewChild<ElementRef>("nameInput"); // signal-based query (newer Angular)