Angular 2 @ViewChild批注返回未定义

Question

我正在尝试学习Angular 2。

我想使用@ViewChild Annotation 从父组件访问子组件。

下面是几行代码：

在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(){};

 }

最后是模板（如注释中所建议）：

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模板已正确加载到 ico-filter-tiles标记中（实际上，我能够看到标头）。

注意：BodyContent类使用DynamicComponetLoader注入到另一个模板（Body）中：dcl.loadAsRoot（BodyContent，'＃ico-bodyContent'，注入器）：

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]

})

问题是，当我尝试写入ft控制台日志时，我得到了undefined，当然，当我尝试将某些内容推入“ tiles”数组中时，我当然会遇到异常：“ no属性tile为“ undefined””。

还有一件事：FilterTiles组件似乎已正确加载，因为我能够看到它的html模板。

有什么建议吗？谢谢

Answer 1

您可以使用二传手 @ViewChild()@ViewChild(FilterTiles) set ft(tiles: FilterTiles) {&nbsp; &nbsp; console.log(tiles);};如果您具有ngIf包装器，则将使用未定义的setter进行调用，然后使用ngIf允许其呈现的引用再次进行调用。我的问题是别的。我没有在我的app.modules中包含包含“ FilterTiles”的模块。模板没有引发错误，但是引用始终是未定义的。