как поместить каждый @ContentChildren в отдельный div, который генерируется с помощью * ngFor

Question

Я попытался создать некоторые компоненты, подобные табуляциям, но у меня возник вопрос.

Вот использование моих компонентов:

<app-ui-tab001-frame>
    <app-ui-tab001-item [tabTitle]="'titleA'">contentA</app-ui-tab001-item>
    <app-ui-tab001-item [tabTitle]="'titleB'">contentB</app-ui-tab001-item>
</app-ui-tab001-frame>

html "app-ui-tab001-frame "выглядит так:

<ul>
  <li *ngFor="let tab of tabArray.toArray()">

         <ng-content></ng-content>

  </li>
</ui>
<ul>
  <li *ngFor="let tab of tabArray.toArray()">
     <div>
         **I want to put each @ContentChildren here**
         **tried {{tab.elemRef.nativeElement.innerHTML}} here but not working**
     </div>
  </li>
</ui>

HTML-код" app-ui-tab001-item "выглядит так:

<div class="tab-pane" *ngIf="isActive">
  <ng-content></ng-content>
</div>

ts" app-ui-tab001-frame "выглядит так:

export class UiTab001FrameComponent implements OnInit,AfterContentInit {
  @ContentChildren(UiTab001ItemComponent) tabArray : QueryList<UiTab001ItemComponent>;

  constructor() { }


  ngOnInit() {

  }
  _checkWindowWidth(){

  }

  ngAfterContentInit(){

    console.log(this.tabArray.toArray());

  }

}

значение" app-ui-tab001-item "выглядит так:

export class UiTab001ItemComponent implements OnInit {
  @Input() isActive :boolean = false;
  @Input() tabTitle :string = null;
  public elemRef :ElementRef<any>;
  constructor(private elem :ElementRef<any>) { 
    this.elemRef = this.elem;
  }

  ngOnInit() {
  }

}

, и я хочу поставитькаждый компонент "app-ui-tab001-item" в отдельный div, который генерируется * ngFor (возможно ли?), но я не знаю, как заставить его работать.

Я пытался использовать elementRefв функции constructor () компонента "app-ui-tab001-item" и вставьте "{{tab.elemRef.nativeElement.innerHTML}} в эти div, но это не сработало так, как я хочу. на самом деле яЯ новичок в Angular :( Просто нужно, чтобы кто-то указал на мою ошибку

Answer 1

Да, вы можете.Просто оберните ng-content элемента в ng-template и используйте ngTemplateOutlet для отображения элемента в компоненте списка.

@Component({
  selector: 'my-item',
  template: `
  <ng-template #content>
    <ng-content></ng-content>
  </ng-template>
  `
})
export class ItemComponent {
    @ViewChild('content', { static: true }) content: TemplateRef<void>;
}

@Component({
  selector: 'my-list',
  template: `
  <ul>
    <li *ngFor="let tab of tabArray">
      <div>
         <ng-template [ngTemplateOutlet]="tab.content"></ng-template>
      </div>
    </li>
  </ul>

  `
})
export class ListComponent {
    @ContentChildren(ItemComponent) tabArray : QueryList<ItemComponent>;
}

https://stackblitz.com/edit/angular-nukgpp?file=src%2Fapp%2Fapp.component.ts