Question

我正在使用 Angular 2 和 Ionic 2 ，我想从父组件中获取属性。

所以我的父composent是一个名为＆＃34; ServicesPage ＆＃34;的类，我的子组件名为＆＃34; AddonCell ＆＃34;

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
  //[...]
}

更新

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

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

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

Answer 2

感谢您的帮助，但我找到了解决方案！

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

在Angular 2

2 个答案: