Как передать компонент в библиотеку (передать ng-шаблон в компонент)

Question

Мне нужно передать итерированный компонент в другой компонент, что-то вроде этого:

<component-a>
  <ng-template *ngFor="let item of items">
    <component-b [options]="item"></component-b>
  </ng-template>
</component-a>

Я пробовал разные способы отображения компонента-b, но, к сожалению, не получил результата. Один из них использует @ ContentChildren декоратор @ContentChildren(TemplateRef, {descendants: true}) template: QueryList<TemplateRef<any>>;

Я получил массив templateRefs и использую forEach для createEmbeddedView в ngAfterContentInit

this.template.forEach(item => {
  this.viewContainerRef.createEmbeddedView(item);
});

Если я делаю это в ngAfterContentInit , у меня появляется следующая ошибка

AppComponent.ngfactory.js? [sm]:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'options: undefined'. Current value: 'options: [object Object]'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

, но отображается компонент. Что мне не хватает? Мэйби, я должен go по-другому?

Если я переместу это в ngAfterContentChecked я получу бесконечность l oop

Component-a HTML:

<div class="component-a">
  <ng-container></ng-container>
  <ng-content></ng-content>
</div>

Компонент-b Stati c text.

Answer 1

Решено this.viewTemplateRef.createEmbeddedView (item) .detectChanges ();