在 Angular 2 中访问组件的子属性

Question

我正在使用 Angular 2 和 Ionic 2，我想得到一个属性来自父组件。

所以我的父组件是一个名为“ServicesPage”的class，我的子组件名为“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
  //[...]
}

更新

插件模块

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

Answer 3

1-在父组件中使用模板引用html

<app-child-component #exampleReference></app-child-component>

2-在父组件中导入@ViewChild class .ts

import { ViewChild } from '@angular/core';

3-在父组件class中导入子组件class.ts

import { ChildComponent } from '../child/child.component';

4-在父组件中使用@ViewChild() class .ts

@ViewChild('exampleReference', {static: false}) local_property_name: ChildComponent;

现在，您可以使用您选择的 local_property_name 在父组件中访问子组件的属性。

例如。 : this.local_property_name.getFilterData();

在 Angular 2 中访问组件的子属性

Access children's properties of a component in Angular 2

angular

ionic2

viewchild