Перебирать элементы ng-содержимого и оборачивать каждый в свой собственный вложенный div

Я читал, что это пока не поддерживается, но мне было интересно, нашел ли кто-нибудь хакерский обходной путь для этой проблемы.

В настоящее время у меня есть родительский компонент, который имеет этот шаблон:

<dxi-item location='after' class="osii-item-content">
    <span><ng-content select="[osii-page-button]"></ng-content></span>
</dxi-item>

Который создает следующее:

<dxi-item location='after' class="osii-item-content">
    <button> // first button returned by ng-content </button>
    <button> // second button returned by ng-content </button>
    <button> // third button returned by ng-content </button>
</dxi-item>

Но то, что я хотел бы сделать, это получить следующий HTML:

<dxi-item location='after' class="osii-item-content">
    <button> // first button returned by ng-content </button>
</dxi-item> 

<dxi-item location='after' class="osii-item-content">
    <button> // second button returned by ng-content </button>
</dxi-item>

<dxi-item location='after' class="osii-item-content">
    <button> // third button returned by ng-content </button>
</dxi-item>

Есть ли какой-нибудь известный способ решения этой проблемы?

Спасибо!

2 ответа

В качестве оснастки вы можете поместить все свои кнопки в шаблоны в содержимое родительского компонента, а затем перебрать все шаблоны, чтобы отобразить их как содержимое.

App.component.html

<parent_component>
    <ng-template>
        <button> // first button </button>
    </ng-template>
    <ng-template>
        <button> // second button </button>
    </ng-template>
    <ng-template>
        <button> // third button </button>
    </ng-template>
</parent_component>

Parent.component.ts

export class ParentComponent {
  @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef>;
}

Parent.component.html

<div *ngFor="let x of templateRefs">
  <dxi-item location='after' class="osii-item-content"> 
    <ng-container *ngTemplateOutlet="x"></ng-container>
  </dxi-item>
</div>

Лучшим решением (это не совсем то, что вы просили) было бы передать один шаблон для ваших кнопок, а затем массив с содержимым кнопок. В этом примере я передаю массив строк, но это, безусловно, могут быть целые объекты.

App.component.html

<parent_component [texts]=['first', 'second', 'third'>
    <ng-template let-x @BtnTemplate>
        <button> {{x}} </button>
    </ng-template>
</parent_compnent>

Parent.component.ts

export class ParentComponent {
  @Input() texts: string[];
  @ContentChild("BtnTemplate") btnTemplateRef: TemplateRef;
}

Parent.component.html

<div *ngFor="let x of texts">
  <dxi-item location='after' class="osii-item-content"> 
    <ng-container *ngTemplateOutlet="btnTemplateRef"
                  context: { $implicit: x }">
    </ng-container>
  </dxi-item>
</div>

Я думаю, что вы ищете что-то вроде этого: <ng-container *ngFor="let item of items"> <your-compo></your-compo> </ng-container>Таким образом, вы перебираете элементы и генерируете необходимые компоненты. Не беспокойтесь, ng-контейнер не будет отображаться, будут только ваши компоненты.

Другие вопросы по тегам