Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Angular2 как transclusion, только без задания точного количества элементов. / 8 сообщений из 8, страница 1 из 1
14.04.2017, 15:49
    #39438829
TsHeloWorlder
TsHeloWorlder
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Angular2 как transclusion, только без задания точного количества элементов.
angular2 transclusion похоже штука хорошая.
https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

пример реализации

Код: html
1.
2.
3.
4.
<div class="card">
    <ng-content select="card-header"></ng-content>
    <ng-content select="card-body"></ng-content>    
</div>




Но можно ли сделать количество вложенных элементов динамическим. Чтобы не писать так:
Код: html
1.
2.
3.
4.
5.
6.
7.
<div class="card">
    <ng-content select="cardItem1"></ng-content>
    <ng-content select="cardItem2"></ng-content>
    <ng-content select="cardItem3"></ng-content>
    ...
    <ng-content select="cardItem1000"></ng-content>
</div>



может быть с использованием какого-то другого подхода, а не через transclusion.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.04.2017, 10:57
    #39441424
TsHeloWorlder
TsHeloWorlder
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Angular2 как transclusion, только без задания точного количества элементов.
Так можно как-то это сделать ?
В данном решении нельзя динамически создать наполнение элемента, т.к. нужно явно прописывать:<item1>,<item2> и т.д. Нельзя сделать какой-то вывод через ngFor, типа:
Код: html
1.
2.
<div *ngFor  let item in items>
   <{{item}}>.....</{{item}}>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2017, 05:51
    #39441969
FishHook
FishHook
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Angular2 как transclusion, только без задания точного количества элементов.
TsHeloWorlderможет быть с использованием какого-то другого подхода, а не через transclusion

А можно полюбопытствовать, что за компонент вы конструируете, в котором может быть тысяча обособленных элементов контента? Это попахивает изобретением тысячи переменных вместо одного массива.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2017, 12:20
    #39442182
TsHeloWorlder
TsHeloWorlder
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Angular2 как transclusion, только без задания точного количества элементов.
FishHook,

Вопрос даже не в 1000. А в необходимости создавать вложенные сущности динамически. Их может быть 3, а может быть 5. Конфигурироваться это должно отдельно, в админке.

PS. В принципе сейчас, я пришол к другому решению - создал отдельный компонент, который и выводит динамическую часть через ngFor. И его уже вставил в этот <div class="card">.
Хотя было бы интересно, все же, узнать есть ли способ решить задачу иначе.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2017, 12:36
    #39442208
FishHook
FishHook
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Angular2 как transclusion, только без задания точного количества элементов.
TsHeloWorlderА в необходимости создавать вложенные сущности динамически.
Пример дайте
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2017, 17:45
    #39442466
TsHeloWorlder
TsHeloWorlder
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Angular2 как transclusion, только без задания точного количества элементов.
FishHook,

Готового примера нету. Только идея. Предположим у нас в системе есть 5 виджетов: новости, некий справочник, горячие предложения и т.д. И нужна админка, которая позволит юзеру сконфигурировать вывод этих блоков.
Мне хочется, чтобы можно было программно выводить виджеты. Чтобы, к примеру, если нету "горячих предложений", этот виджет не создавался. И т.д.

Я конечно могу захардкодить что-то типа того:
Код: html
1.
2.
3.
4.
<div class="card">
    <*ngIf="headerExist" ng-content select="card-header"></ng-content>
    <*ngIf="bodyExist" ng-content select="card-body"></ng-content>    
</div>


но так я не могу задать порядок вывода виджетов, а также придется добавлять новые компоненты когда появятся. В общем так не правильно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2017, 19:05
    #39442502
FishHook
FishHook
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Angular2 как transclusion, только без задания точного количества элементов.
TsHeloWorlder,

Ну разумеется так неправильно. Вам нужна директива, которая в качестве инпута принимает тип компонента и подгружает внутрь себя компонент с параметрами директивы по мере необходимости. Ну и ngFor по списку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2017, 10:28
    #39443096
TsHeloWorlder
TsHeloWorlder
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Angular2 как transclusion, только без задания точного количества элементов.
FishHook,

Я еще только учусь Ангуляру, не могу понять кое что. Насчет директивы принимающей тип кажется понял - хотя не ясно как передать именно ТИП. Что есть Тип в Ангуляре, селектор компонента на подобие "<my-list>" ?
А вот насчет "подгружает внутрь себя компонент с параметрами директивы по мере необходимости." это совсем не понятно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Angular2 как transclusion, только без задания точного количества элементов. / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]