Перебирать элементы 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-контейнер не будет отображаться, будут только ваши компоненты.