Блог

Теперь у меня есть два компонента

 //app-row-two
<div>
  <div x-col><ng-content select="[slot=1]"></ng-content></div>
  <div x-col><ng-content select="[slot=2]" ></ng-content></div>
</div>
//app-row-three
<div>
  <div x-col><ng-content select="[slot=1]"></ng-content></div>
  <div x-col><ng-content select="[slot=2]" ></ng-content></div>
  <div x-col><ng-content select="[slot=3]" ></ng-content></div>
</div>
  

Для двух и трех столбцов. И когда я использую его, нужно написать slot =»1″ и т.д.
Есть ли способ объединить его в один компонент, который определяет, сколько компонентов в ng-контенте, и создает столбцы?

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

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

Вот ссылка Angular Docs на этот подход.

Чтобы их можно было обнаружить, вам нужно сообщить Angular, как он будет находить дочерние элементы, в данном случае я использую директиву:

 @Directive({ selector: "[option]" })
export class Option {}

@Component({
  selector: "container",
  template: `
    <ng-content></ng-content>
    <strong>I have {{ childrensLength }} childrens</strong>
  `
})
export class ContainerComponent {
  @ContentChildren(Option) options: QueryList<Option>;

  get childrensLength(): number {
    return this.options ? this.options.length : 0;
  }
}
  

 <container>
    <div option>I am queryable!</div>
    <div option>Me too!</div>
    <div option>Me as well...</div>
    <div>I am not queryable</div>
</container>
  

Вывод: