Как прокинуть данные через ng-content?

В Angular есть возможность использовать ng-content для передачи данных из родительского компонента в дочерние компоненты, и это реализуется с помощью слотов (slots). Слоты определяются внутри контента дочернего компонента и являются местом, где данные из родительского компонента будут отображаться.

Для использования ng-content с передачей данных, вам необходимо выполнить следующие шаги:

1. Определите слоты в шаблоне дочернего компонента с помощью ng-content и атрибута select. Например:

<ng-content select=".header"></ng-content>

<ng-content select=".body"></ng-content>

<ng-content select=".footer"></ng-content>

Здесь мы определили три слота: .header, .body и .footer. Каждый слот будет содержать свое содержимое.

2. В родительском компоненте разместите содержимое в соответствующих слотах, используя селекторы классов. Например:

<app-child>
  <div class="header">Здесь находится заголовок</div>
  <div class="body">Здесь находится основное содержимое</div>
  <div class="footer">Здесь находится подвал</div>
</app-child>

Мы поместили содержимое внутри тега <app-child>, и оно будет отображаться в соответствующих слотах внутри дочернего компонента <ng-content>.

3. После этого, внутри дочернего компонента, вы можете ссылаться на содержимое слотов через свойство ng-content, которое представляет собой коллекцию элементов. Например:

@ContentChildren('header') headers: QueryList<ElementRef>;

@ContentChildren('body') bodies: QueryList<ElementRef>;

@ContentChildren('footer') footers: QueryList<ElementRef>;

ngAfterContentInit() {
  console.log('Заголовок:', this.headers.first.nativeElement.innerText);
  console.log('Основное содержимое:', this.bodies.first.nativeElement.innerText);
  console.log('Подвал:', this.footers.first.nativeElement.innerText);
}

Здесь мы используем декоратор @ContentChildren для получения ссылок на элементы, которые были размещены в соответствующих слотах. Мы также используем QueryList и ElementRef для доступа к элементам DOM.

Обратите внимание, что в примере выше мы получаем только первый элемент из каждого слота с помощью first, но при необходимости вы можете обрабатывать все элементы в коллекции.

Вот и все! Теперь данные успешно передаются через ng-content. Вы можете использовать эту функциональность для более гибкой и мощной комбинации компонентов и контента.