如何从子组件的属性中收集数据 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>

我有组件 blocks-banners-slideshow、blocks-catalog-category、blocks-catalog-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>;
...

并订阅 ngAfterViewInit():

内的那些查询列表

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

如何从子组件的属性中收集数据 Angular 2

How to collect data from attributes from child component Angular 2

angular

components

ionic2

collect