为了账号安全,请及时绑定邮箱和手机立即绑定

Angular 2 @ViewChild批注返回未定义

Angular 2 @ViewChild批注返回未定义

千万里不及你 2019-11-08 12:54:11
我正在尝试学习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模板。有什么建议吗?谢谢
查看完整描述

3 回答

?
LEATH

TA贡献1936条经验 获得超6个赞

您可以使用二传手 @ViewChild()


@ViewChild(FilterTiles) set ft(tiles: FilterTiles) {

    console.log(tiles);

};

如果您具有ngIf包装器,则将使用未定义的setter进行调用,然后使用ngIf允许其呈现的引用再次进行调用。


我的问题是别的。我没有在我的app.modules中包含包含“ FilterTiles”的模块。模板没有引发错误,但是引用始终是未定义的。


查看完整回答
反对 回复 2019-11-08
  • 3 回答
  • 0 关注
  • 644 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信