Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Angular 5: Рендер детей в родителя (https://javascript.ru/forum/angular/72189-angular-5-render-detejj-v-roditelya.html)

rentgenius 14.01.2018 15:35

Angular 5: Рендер детей в родителя
 
Всем доброго дня.
Имеем 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;


PS> шаблон должен быть именно в таком варианте

destus 14.01.2018 16:51

rentgenius,
ещё код компонента Book нужен

destus 14.01.2018 17:19

rentgenius,
https://stackblitz.com/edit/angular-...p.component.ts

rentgenius 14.01.2018 19:09

Цитата:

Сообщение от destus (Сообщение 475171)

Спасибо!
А если нужно будет в <title> вставить другой компонент, как лучше сделать? Или условия для title

destus 14.01.2018 19:56

rentgenius,
Ну если вставить другой компонент, то просто поменяется условие для ContentChild. В качестве селектора передавать не template variable, а класс компонента, в котором и определять геттер для текста.

Хотя очень странно видеть такие штуки в коде. Все таки эти данные не в коде прописаны ведь, а получаются откуда-нибудь с сервера. А данные хранят на уровне сервиса, который можно подключить в компонент books и выводить названия книг списком. Но я не знаю как устроено все у вас)

rentgenius 14.01.2018 20:04

destus,
Вроде все проще, но не пойму как)
Чтобы смог работать такой вариант:
<books>

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

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

</books>


Т.е. такой вариант отрабатывает в шаблоне, но когда начинаешь по циклу прогонять title, то тут засада(((


Часовой пояс GMT +3, время: 03:06.