L’annotazione Angular 2 @ViewChild restituisce undefined

Sto cercando di imparare Angular 2.

Vorrei accedere a un componente figlio da un componente padre utilizzando l’annotazione @ViewChild .

Ecco alcune righe di codice:

In BodyContent.ts ho:

import {ViewChild, Component, Injectable} from 'angular2/core'; import {FilterTiles} from '../Components/FilterTiles/FilterTiles'; @Component({ selector: 'ico-body-content' , templateUrl: 'App/Pages/Filters/BodyContent/BodyContent.html' , directives: [FilterTiles] }) export class BodyContent { @ViewChild(FilterTiles) ft:FilterTiles; public onClickSidebar(clickedElement: string) { console.log(this.ft); var startingFilter = { title: 'cognomi', values: [ 'griffin' , 'simpson' ]} this.ft.tiles.push(startingFilter); } } 

mentre in FilterTiles.ts :

  import {Component} from 'angular2/core'; @Component({ selector: 'ico-filter-tiles' ,templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html' }) export class FilterTiles { public tiles = []; public constructor(){}; } 

Finalmente qui i modelli (come suggerito nei commenti):

BodyContent.html

 

FilterTiles.html

 

Tiles loaded

... stuff ...

Il template FilterTiles.html è correttamente caricato nel tag ico-filter-tiles (infatti sono in grado di vedere l’intestazione).

Nota: la class BodyContent viene iniettata all’interno di un altro modello (Body) utilizzando DynamicComponetLoader: dcl.loadAsRoot (BodyContent, ‘# ico-bodyContent’, injector):

 import {ViewChild, Component, DynamicComponentLoader, Injector} from 'angular2/core'; import {Body} from '../../Layout/Dashboard/Body/Body'; import {BodyContent} from './BodyContent/BodyContent'; @Component({ selector: 'filters' , templateUrl: 'App/Pages/Filters/Filters.html' , directives: [Body, Sidebar, Navbar] }) export class Filters { constructor(dcl: DynamicComponentLoader, injector: Injector) { dcl.loadAsRoot(BodyContent, '#ico-bodyContent', injector); dcl.loadAsRoot(SidebarContent, '#ico-sidebarContent', injector); } } 

Il problema è che quando provo a scrivere ft nel log della console, ottengo undefined , e ovviamente ottengo un’eccezione quando provo a inserire qualcosa all’interno dell’array “tiles”: ‘no property tiles for “undefined”‘ .

Un’altra cosa: il componente FilterTiles sembra essere caricato correttamente, dal momento che sono in grado di vedere il modello html per esso.

Qualche suggerimento? Grazie