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>

我有组件块 - 横幅 - 幻灯片，块 - 目录 - 类别，块 - 目录 - 产品。我需要以某种方式循环所有这些组件以从我的父组件中的属性 - [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的属性中收集数据

1 个答案: