Angular 9+ : nested ng-content and ContentChildren

Question

我正在尝试使用 ContentChildren 捕获外部 ng-content 的内容，但没有成功。 这是代码: 应用程序组件.html:

<app-table-wrapper>
    <app-column></app-column>
    <app-column></app-column>
    <app-column></app-column>
</app-table-wrapper>

表格包装:

@Component({
  selector: 'app-table-wrapper',
  template: `<p>table-wrapper works!</p>
    <app-hyd-table>
      <ng-content></ng-content>
    </app-hyd-table> `,
})
export class TableWrapperComponent implements OnInit {
  @ViewChild(HydTableComponent, { static: true }) _hydTable: HydTableComponent;
  @ContentChildren(ColumnComponent, { descendants: true }) columns: QueryList<
    ColumnComponent
  >;

  constructor() {}

  ngOnInit(): void {
    console.log('table wrapper - ngOnInit');
  }

  ngAfterContentInit(): void {
    console.log('table wrapper - ngAfterContentInit');
    console.log({ columns: this.columns });
  }

  ngAfterViewInit(): void {
    console.log('table wrapper - ngAfterViewInit');
    this._hydTable.columns = this.columns;  // <--- Manual override
  }
}

表:

@Component({
  selector: 'app-hyd-table',
  template: `<p>hyd-table works!</p>
    <ng-content></ng-content>
    <div *ngFor="let col of columns; let i = index">Column {{ i }}</div>
  `,
})
export class HydTableComponent implements OnInit {
  @ContentChildren(ColumnComponent) columns: QueryList<ColumnComponent>; // <-- this is empty
  
  constructor() {}

  ngOnInit(): void {
      console.log("table - ngOnInit");
  }

  ngAfterContentInit(): void {
      console.log("table - ngAfterContentInit");
      console.log({ columns: this.columns });
  }

  ngAfterViewInit(): void {
      console.log("table - ngAfterViewInit");
  }
}

在表格组件中，QueryList 是空的，我必须在 ngAfterViewInit 中手动从表格包装组件中设置它，否则表格组件中的 *ngFor 将不会呈现任何内容。

所以我的问题是:如何将包装组件的 ng-content“转发”到内部组件的 ContentChildren？ HTML 甚至在内部组件内呈现，只是 ContentChildren 无法获取其模板内的列。

Answer 1

在 Google 中找到合适的关键字后，我发现这个问题已经存在 3 年多了，但仍然没有解决方案: https://github.com/angular/angular/issues/16299 看来我得用肮脏的方式来做这件事了。