0

我正在尝试使用 ContentChildren 捕获外部 ng-content 的内容，但没有成功。这是代码：app.component.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 无法获取其模板中的列。

4

1 回答 1

1

在谷歌找到合适的关键字后，我发现这个问题已经开放了 3 年多了，仍然没有解决方案： https ://github.com/angular/angular/issues/16299 好像我'将不得不以肮脏的方式去做。

于 2020-07-14T07:13:05.980 回答