訪問Angular 2中組件的兒童屬性

Question

我正在使用Angular 2和Ionic 2我想從父組件獲取屬性。

所以我的父母composent是一個名爲「ServicesPage」類，而我的孩子組件被命名爲「AddonCell」。

ServicesPage.html

<ion-content> 
    <ul *ngIf='savedAddons'> 
    <addon-cell [type]="addon" *ngFor="let addon of savedAddons"></addon-cell> 
    </ul> 
</ion-content> 

ServicesPage.ts

@Component({ 
    selector: 'page-services', 
    templateUrl: 'services.html' 
}) 

export class ServicesPage { 
    // [...] 
    refreshInstalledAddons() : void { 
     console.log("[+] Getting properties of all addon-cell ..."); 
     // I would like a for loop here to get all AddonCell objects 
     // and access properties like : myAddon.myVar 
    } 
} 

AddonCell.ts

@Component({ 
    selector: 'addon-cell', 
    template: `<div #target></div>` 
}) 
export class AddonCell { 
    @ViewChild('target', {read: ViewContainerRef}) target; 
    @Input() type; 
    myVar = false; // <---- Trying to get this variable 
    //[...] 
} 

UPDATE

AddonModule

// Angular core component 
import { NgModule } from '@angular/core'; 

import { AddonCell } from './components/system/common/cell.component'; 

// Importing and exporting all addons 
export { MeteoAddon }  from './components/meteo/meteo.addon'; 
import { MeteoAddon }  from './components/meteo/meteo.addon'; 

import { MeteoPagesModule } from './components/meteo/pages/meteo.module'; 

// Creating an array containg addons class names 
// Please note, it's used for further instanciations 
export let classNameArray = ["MeteoAddon"]; 

export let addonsMap = { 
    'MeteoAddon' : MeteoAddon }; 

@NgModule({ 
    declarations: [ 
    AddonCell, 
    MeteoAddon], 
    imports: [ MeteoPagesModule ], // Importing all addon's pages 
    entryComponents: [ MeteoAddon ], 
    exports: [ 
    AddonCell, 
    MeteoAddon] 
}) 

export class AddonModule {} 

注：savedAddons是含陣列串實例名。

所以主要問題是如何獲取所有的實例化對象AddonCell以訪問屬性？

Answer 1

感謝您的幫助，但我找到了解決方案！

我說我ServicePage.ts這樣的：

@ViewChildren('addoncell') components:QueryList<AddonCell>; 
/// [...] 
refreshInstalledAddons() : void { 
    this.components.forEach(function(element) { 
     console.log(element.cmpRef.instance.myVar); 
    }); 
} 

在ServicePage.html，我添加了一個標識符與＃

<addon-cell #addoncell [type]="addon" *ngFor="let addon of savedAddons"></addon-cell> 

Answer 2

class ServicesPage { 
    @ViewChild(AddonCell) 
    addonCell: AddonCell; 

    getVar() { 
    // this.addonCell.myVar 
    } 
}