Angular递归ng-template获取组件问题求助

Hey there! Let’s dig into this recursive template and ContentChildren issue you’re hitting in Angular — I’ve run into similar quirks before, so let’s break it down.

Why This Happens #

The core problem boils down to how Angular’s @ContentChildren and @ViewChildren work, especially with recursive templates:

• @ContentChildren only queries content that’s projected into your component via <ng-content> (i.e., content passed in from the parent component at initialization).
• When you use ngTemplateOutlet to render your recursive template inside the item component, the generated <header> elements are part of the item component’s view, not its projected content. So @ContentChildren won’t pick them up — it’s looking in the wrong place.

Fixes to Try #

Here are two straightforward approaches to get your item component to detect those recursively generated headers:

1. Switch to @ViewChildren for Dynamic View Content

Since the recursive headers are part of the item component’s view (not projected content), replace @ContentChildren with @ViewChildren, and add the descendants: true option to capture deep child components:

// item.component.ts
import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { HeaderComponent } from './header.component';

@Component({
  selector: 'item',
  template: `
    <ng-content></ng-content> <!-- Your repeat/recursion template gets projected here -->
  `
})
export class ItemComponent implements AfterViewInit {
  // Query all HeaderComponent instances in the component's view (including deep children)
  @ViewChildren(HeaderComponent, { descendants: true }) headers!: QueryList<HeaderComponent>;

  ngAfterViewInit() {
    // Log initial headers
    console.log('Initial item headers:', this.headers);
    
    // Subscribe to changes (critical for recursive content that loads dynamically)
    this.headers.changes.subscribe(updatedHeaders => {
      console.log('Updated item headers:', updatedHeaders);
    });
  }
}

2. Adjust Template Structure to Keep Recursion in the View

If you want to avoid relying on descendants, restructure your templates to render the recursive content directly inside the item component’s view (instead of projecting it). This makes the relationship explicit:

First, pass the recursive template as an input to the item component:

// item.component.ts
import { Component, Input, ViewChildren, QueryList, AfterViewInit, TemplateRef } from '@angular/core';
import { HeaderComponent } from './header.component';

@Component({
  selector: 'item',
  template: `
    <p>Item content</p>
    <!-- Render the recursive template directly in the item's view -->
    <ng-container *ngTemplateOutlet="recursionTemplate"></ng-container>
  `
})
export class ItemComponent implements AfterViewInit {
  @Input() recursionTemplate!: TemplateRef<any>;
  
  @ViewChildren(HeaderComponent) headers!: QueryList<HeaderComponent>;

  ngAfterViewInit() {
    this.headers.changes.subscribe(updatedHeaders => {
      console.log('Recursive headers in item:', updatedHeaders);
    });
  }
}

Then update your parent template to pass the template reference:

<!-- parent.component.html -->
<ng-template #recursion>
  <header>
    <item [recursionTemplate]="recursion"></item>
  </header>
</ng-template>

<!-- Kick off the recursion -->
<ng-container *ngTemplateOutlet="recursion"></ng-container>

Key Takeaways #

• Use @ContentChildren for content projected into your component (from parents).
• Use @ViewChildren for content generated inside your component’s template (including dynamic/recursive content).
• Always subscribe to QueryList.changes when dealing with dynamic content — recursive components are added incrementally, so initial queries might miss them.

内容的提问来源于stack exchange，提问作者Skyverian