Angular 5: Как рендерить детей в родителя?

Question

[Павел Кузнецов]

Всем доброго дня.
Имеем Angular 5

Есть шаблон:

<books>

 <book>
  <title>Книга 1</title>
  <author>Автор книги 1</author>
  <content>Краткое описание 1</content>
 </book>

 <book>
  <title>Книга 2</title>
  <author>Автор книги 2</author>
  <content>Краткое описание 2</content>
 </book>

</books>

Вывожу все компонентами - все гуд.
Понадобилось собрать все заголовки книг и вывести их отдельно от вывода самих книг.

Т.е. шаблон компонента books будет что то типа этого:

<li *ngFor="let book of books">{{book.title}}</li> <ng-content></ng-content>

Список книг получаю так:
@ContentChildren(Book) books: QueryList<Book>;

Но в {{book.title}} вместо названия книги получаю [object Object]

Куда копать? Видимо Angular получает так книгу, но как её рендерить?

Компонент book:
template: '<ng-content></ng-content>'
...

@ContentChild(BookTitle)
title: BookTitle;

Answer 1

[Евгений Калибров]

@ContentChildren(Book) books: QueryList<Book>;

А зачем список книг получать так? Так вы получите список не самих объектов, а список компонентов класса ElementRef. Думаю правильнее получать список книг откуда-то из сервиса (провайдера), и делать это и там где нужны только названия, и там где сами книги.

Comments

[Павел Кузнецов]

Возможно как то из сервиса выдернуть структуру книг?

<books>

 <book>
  <title>Книга 1</title>
  <author>Автор книги 1</author>
  <content>Краткое описание 1</content>
 </book>

 <book>
  <title>Книга 2</title>
  <author>Автор книги 2</author>
  <content>Краткое описание 2</content>
 </book>

</books>

[Евгений Калибров]

Павел Кузнецов, из сервиса вы будете получать объекты книг:

[
  {
    id: 1,
    title: "Книга 1",
    author: "Автор книги 1",
    content: "Краткое описание 1"
  },
  {
    id: 2,
    title: "Книга 2",
    author: "Автор книги 2",
    content: "Краткое описание 2"
  }
]

А в компоненте выводить любой шаблон, на основе этого массива объектов.

[Павел Кузнецов]

Евгений Калибров, спасибо!
А как "рендерить" содержимое компонента?
Чтобы можно было писать вложенные компоненты, например так так:
<title><icon>green-book</icon>Книга 2</title>
(без атрибутов)

[Евгений Калибров]

<title>
  <icon>green-book</icon>
  <label>Книга 2</label>
</title>

шаблон компонента title:

<ng-content select="icon"></ng-content>
<ng-content select="label"></ng-content>