Как собрать данные из атрибутов дочернего компонента Angular 2

Таким образом, проблема заключается в том, как собрать данные из атрибутов в дочерних компонентах в шаблоне для родительского компонента. Родительский шаблон выглядит так:

<ion-content>
  <blocks-banners-slideshow class="contentBlock" [zone]="'main'" [slideOptions]="{loop:true}"></blocks-banners-slideshow>
  <blocks-catalog-category class="contentBlock" [root]="0"></blocks-catalog-category>
  <blocks-catalog-topproducts class="contentBlock" [dirs]="[0]" ></blocks-catalog-topproducts>
</ion-content> 

У меня есть компоненты блоки-баннеры-слайд-шоу, блоки-каталог-категория, блоки-каталог-товары. Мне нужно каким-то образом зациклить все эти компоненты для сбора данных из атрибутов - [zone], [root], [dirs] и т. д. в моем родительском компоненте.

У тебя есть идеи?


person Alexander Zakusilo    schedule 20.09.2016    source источник


Ответы (1)


Вы можете получить к ним доступ через ViewChild.

Дайте своим дочерним именам или используйте вместо этого тип:

<ion-content>
  <blocks-banners-slideshow #bbs class="contentBlock" [zone]="'main'" [slideOptions]="{loop:true}"></blocks-banners-slideshow>
  <blocks-catalog-category #bcc class="contentBlock" [root]="0"></blocks-catalog-category>
  <blocks-catalog-topproducts #bct class="contentBlock" [dirs]="[0]" ></blocks-catalog-topproducts>
</ion-content> 

И в вашем компоненте:

@ViewChild('bbs') bbs1: BlocksBannersSlideshowComponent;
@ViewChild(BlocksBannersSlideshowComponent) bbs2: BlocksBannersSlideshowComponent;

@ViewChild('bcc') bcc1: BlocksCatalogCategoryComponent;
@ViewChild(BlocksCatalogCategoryComponent) bcc2: BlocksCatalogCategoryComponent;
...

Эти переменные доступны после запуска этого события: ngAfterViewInit() !

Или используйте ViewChildren для динамически добавляемых компонентов:

@ViewChildren(BlocksBannersSlideshowComponent) bbsChilds: QueryList<BlocksBannersSlideshowComponent>;

@ViewChildren(BlocksCatalogCategoryComponent) bccChilds: QueryList<BlocksCatalogCategoryComponent>;
...

И подпишитесь на эти списки запросов внутри ngAfterViewInit():

this.bssChilds.changes.subscribe(...);
person slaesh    schedule 20.09.2016
comment
Хорошая идея. Спасибо. Но что, если шаблон создается на веб-сервере динамически? - person Alexander Zakusilo; 20.09.2016
comment
И знаете ли вы, как зацикливать компоненты в родительском компоненте? - person Alexander Zakusilo; 20.09.2016
comment
петля? какие компоненты вы хотите зациклить? - person slaesh; 20.09.2016
comment
Все это находится внутри тега ion-content, потому что шаблон может динамически изменяться извне. - person Alexander Zakusilo; 20.09.2016
comment
Хорошо, я понял.. Я не знаю, возможно ли получить все эти дочерние элементы.. Вы можете использовать ElementRef для этого, но тогда у вас нет этих компонентов.. У вас есть только элементы HTML. - person slaesh; 20.09.2016
comment
Я пробовал ElementRef. Это невозможно, потому что атрибуты ng-reflection заполнены [Object object], но он находится в строках. Может быть, вы знакомы с ViewChildren? Любые идеи? - person Alexander Zakusilo; 20.09.2016
comment
Если вы знаете, какие типы возможных дочерних элементов вы можете использовать ViewChildren, конечно! - person slaesh; 20.09.2016
comment
Большое спасибо - person Alexander Zakusilo; 21.09.2016