[解決済み] Angular 2の@ViewChildアノテーションがundefinedを返す

質問

Angular 2を学ぼうとしています。

親コンポーネントから子コンポーネントにアクセスするために ビューチャイルド アノテーションです。

以下、いくつかのコード行を紹介します。

で BodyContent.ts 持っています。

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

にいる間 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(){};
 }

最後に（コメントで提案された）テンプレートを紹介します。

ボディコンテンツ.html

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

フィルタータイル.html

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

FilterTiles.html テンプレートが正しく読み込まれるのは ico-filter-tiles タグが表示されます（実際にヘッダーが表示されています）。

注 BodyContent クラスは、別のテンプレート（Body）内で 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);
   } 
}

と書こうとすると、問題なのは ft をコンソールログに書き込むと、次のようになります。 undefined そしてもちろん、quot;tiles" 配列の中に何かを押し込もうとすると例外が発生します。 'no property tiles for "undefined"' です。 .

もうひとつ。 FilterTiles コンポーネントが正しく読み込まれているようです。このコンポーネントの html テンプレートが表示されるからです。

何か提案はありますか？

解決方法は？

私も同じような問題があり、同じ失敗をした人がいるかもしれないと思い、投稿しました。まず、考慮すべき点として AfterViewInit にアクセスする前に、ビューが初期化されるのを待つ必要があります。 @ViewChild . しかし、私の @ViewChild はまだnullを返していました。問題は私の *ngIf . その *ngIf ディレクティブがコントロールズコンポーネントを殺してしまっていたので、それを参照することができませんでした。

import {Component, ViewChild, OnInit, AfterViewInit} from 'angular2/core';
import {ControlsComponent} from './controls/controls.component';
import {SlideshowComponent} from './slideshow/slideshow.component';

@Component({
    selector: 'app',
    template:  `
        <controls *ngIf="controlsOn"></controls>
        <slideshow (mousemove)="onMouseMove()"></slideshow>
    `,
    directives: [SlideshowComponent, ControlsComponent]
})

export class AppComponent {
    @ViewChild(ControlsComponent) controls:ControlsComponent;

    controlsOn:boolean = false;

    ngOnInit() {
        console.log('on init', this.controls);
        // this returns undefined
    }

    ngAfterViewInit() {
        console.log('on after view init', this.controls);
        // this returns null
    }

    onMouseMove(event) {
         this.controls.show();
         // throws an error because controls is null
    }
}

お役に立てれば幸いです。

EDIT
によって言及されているように 以下、@Ashg を使用することで、解決することができます。 @ViewChildren の代わりに @ViewChild .