Angular 9+: вложенный ng-content и ContentChildren - PullRequest
Новая
       106

Angular 9+: вложенный ng-content и ContentChildren

0 голосов
/ 14 июля 2020

Я пытаюсь захватить содержимое внешнего ng-content с помощью ContentChildren, но безуспешно. Вот код: app.component. html: 

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

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
  }
}

table: 

@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-содержимое компонента-оболочки для ContentChildren внутреннего компонента? HTML даже отображается внутри внутреннего компонента, только ContentChildren не может подобрать столбцы внутри своего шаблона.

1 Ответ

0 голосов
/ 14 июля 2020

Найдя подходящие ключевые слова для использования в Google, я обнаружил, что эта проблема открыта уже более 3 лет и до сих пор не имеет решения: https://github.com/angular/angular/issues/16299 Похоже, я делать это грязным способом.

...