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

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

0 голосов
/ 01 октября 2018

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

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

<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>

Но то, что я хотел бы, чтобыdo, is net следующий 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 ]

0 голосов
/ 01 октября 2018

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

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>
0 голосов
/ 01 октября 2018

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

...