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

Question

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

<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> 

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

Есть ли у вас идеи?

Answer 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>; 
... 

И подписаться на эти querylists внутри из ngAfterViewInit():

this.bssChilds.changes.subscribe(...);