Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.01.2018, 15:35
Новичок на форуме
Отправить личное сообщение для rentgenius Посмотреть профиль Найти все сообщения от rentgenius
 
Регистрация: 14.01.2018
Сообщений: 3

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> шаблон должен быть именно в таком варианте

Последний раз редактировалось rentgenius, 14.01.2018 в 17:57.
Ответить с цитированием
  #2 (permalink)  
Старый 14.01.2018, 16:51
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

rentgenius,
ещё код компонента Book нужен
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2018, 17:19
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

rentgenius,
https://stackblitz.com/edit/angular-...p.component.ts
Ответить с цитированием
  #4 (permalink)  
Старый 14.01.2018, 19:09
Новичок на форуме
Отправить личное сообщение для rentgenius Посмотреть профиль Найти все сообщения от rentgenius
 
Регистрация: 14.01.2018
Сообщений: 3

Сообщение от destus Посмотреть сообщение
rentgenius,
https://stackblitz.com/edit/angular-...p.component.ts
Спасибо!
А если нужно будет в <title> вставить другой компонент, как лучше сделать? Или условия для title
Ответить с цитированием
  #5 (permalink)  
Старый 14.01.2018, 19:56
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

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

Хотя очень странно видеть такие штуки в коде. Все таки эти данные не в коде прописаны ведь, а получаются откуда-нибудь с сервера. А данные хранят на уровне сервиса, который можно подключить в компонент books и выводить названия книг списком. Но я не знаю как устроено все у вас)
Ответить с цитированием
  #6 (permalink)  
Старый 14.01.2018, 20:04
Новичок на форуме
Отправить личное сообщение для rentgenius Посмотреть профиль Найти все сообщения от rentgenius
 
Регистрация: 14.01.2018
Сообщений: 3

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, то тут засада(((
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вакансия: Опытный разработчик Angular / Anguar 2. Москва. AK76 Работа 0 14.08.2017 11:37
Angular task workflow mardoksp Angular.js 0 15.02.2016 21:34
Запрет события Click на дочернем элементе, кот. находится за рамками родителя Smokvin Events/DOM/Window 11 10.11.2013 01:53
ООП вопрос, счетчик детей 9xakep Общие вопросы Javascript 19 03.01.2013 12:21
Как добраться до потомка родителя родителя? FRIE jQuery 5 28.09.2011 15:37