0

I'm working with Angular 2 and Ionic 2 and I would like to get a property from a parent component.

So my parent composent is a class named "ServicesPage", and my child component is named "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 {}

Note: savedAddons is an array containing string instance name.

So the main problem is how to get all the instanciated object AddonCell in order to access properties ?

4

3 回答 3

0

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

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

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

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

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

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

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

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

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

前任。：this.local_property_name.getFilterData();

于 2022-01-24T15:17:15.390 回答
0 
class ServicesPage {
  @ViewChild(AddonCell)
  addonCell: AddonCell;

  getVar() {
     // this.addonCell.myVar
  }
}
于 2017-03-08T11:13:37.687 回答
0

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

我在我的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>
于 2017-03-08T14:49:42.253 回答