Блог

Я делаю проекцию контента с помощью @ContentChildren.

Теперь у меня есть необходимость поместить компоненты из запроса contentchildren куда-нибудь, где я выберу это место. Я также должен добавить дополнительный разделитель, если он не последний в массиве. Итак, причина в том, что на основе заданного списка компонентов (дочерних элементов контента) Мне нужно создать новый список с дополнительными компонентами между ними…

Как это можно сделать в Angular? Я искал динамическое внедрение компонента, но оно всегда начинается с типа компонента, используемого для рендеринга компонента. Но в этом случае у меня уже есть компоненты в массиве запросов ContentChildren…

Вот рабочее решение

Чтобы смоделировать то, что вы хотите реализовать, я реализовал два компонента, tabs и tab

Вы можете использовать эти компоненты следующим образом

 <my-tabs>
  <my-tab text="Tab 1"></my-tab>
  <my-tab text="Tab 2"></my-tab>
  <my-tab text="Tab 3"></my-tab>
</my-tabs>

<div>------------------</div>

<my-tab text="This is rendered itself" [single]="true"></my-tab>
  

Внутри TabComponent я обернул ng-content с помощью ng-template , чтобы я мог внедрить его в компонент с помощью @ViewChild(TemplateRef) content .

 @Component({
  selector: 'my-tab',
  template: `
    <ng-template>
      {{text}}
    </ng-template>

    <ng-container *ngIf="single">
      <ng-container *ngTemplateOutlet="content"></ng-container>
    </ng-container>
  `
})
export class TabComponent {
  @ViewChild(TemplateRef) content;

  @Input() text;
  @Input() single = false; // this will allow to use this component on its own
}
  

TabsComponent

 @Component({
  selector: 'my-tabs',
  template: `
    <div *ngFor="let tab of tabs; let isLast = last">
      <ng-container *ngTemplateOutlet="tab.content"></ng-container>
      <hr *ngIf="!isLast">
    </div>
  `,
})
export class TabsComponent  {
  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
}
  

Вы можете использовать директиву tab.content within *ngTemplateOutlet .

<ng-container *ngTemplateOutlet="tab.content"></ng-container>