Ich versuche, Angular 2 zu lernen.

Ich möchte von einer übergeordneten Komponente mit dem @ auf eine untergeordnete Komponente zugreife@ ViewChild Anmerkung.

Hier einige Codezeilen:

Im BodyContent.ts Ich habe

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);
    } 
}

während 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(){};
 }

Finally hier die Vorlagen (wie in Kommentaren vorgeschlagen):

BodyContent.html

<div (click)="onClickSidebar()" class="row" style="height:200px; background-color:red;">
        <ico-filter-tiles></ico-filter-tiles>
    </div>

FilterTiles.html

<h1>Tiles loaded</h1>
<div *ngFor="#tile of tiles" class="col-md-4">
     ... stuff ...
</div>

FilterTiles.html Vorlage ist korrekt in @ gelad ico-filter-tiles tag (in der Tat kann ich den Header sehen).

Hinweis: Die BodyContent-Klasse wird mit DynamicComponetLoader in eine andere Vorlage (Body) eingefügt: 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);

   } 
}

Das Problem ist, dass, wenn ich versuche zu schreibenft in das Konsolenprotokoll bekomme ichundefined, und natürlich bekomme ich eine Ausnahme, wenn ich versuche, etwas in das "tiles" -Array zu verschieben: 'Keine Eigenschaftskacheln für "undefined"'.

Eine weitere Sache: FilterTiles-Komponente scheint korrekt geladen zu sein, da ich die HTML-Vorlage dafür sehen kann.

Irgendein Vorschlag? Vielen Dan