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

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 回答

?
跃然一笑

我遇到了类似的问题,并认为如果有人犯同样的错误,我会发帖。首先,要考虑的一件事是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

    }

}

希望能有所帮助。


查看完整回答
反对 回复 2019-11-08
?
慕盖茨1488219

前面提到的问题ngIf是导致视图未定义的。答案是使用ViewChildren而不是ViewChild。我遇到了类似的问题,即在加载所有参考数据之前,我不希望显示网格。


的HTML:


   <section class="well" *ngIf="LookupData != null">

       <h4 class="ra-well-title">Results</h4>

       <kendo-grid #searchGrid> </kendo-grid>

   </section>

组件代码


import { Component, ViewChildren, OnInit, AfterViewInit, QueryList  } from '@angular/core';

import { GridComponent } from '@progress/kendo-angular-grid';


export class SearchComponent implements OnInit, AfterViewInit

{

    //other code emitted for clarity


    @ViewChildren("searchGrid")

    public Grids: QueryList<GridComponent>


    private SearchGrid: GridComponent


    public ngAfterViewInit(): void

    {


        this.Grids.changes.subscribe((comps: QueryList <GridComponent>) =>

        {

            this.SearchGrid = comps.first;

        });



    }

}

在这里,我们ViewChildren可以用来监听更改。在这种情况下任何孩子都有参考#searchGrid。希望这可以帮助。


查看完整回答
反对 回复 2019-11-08
?
LEATH

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


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

    console.log(tiles);

};

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


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


查看完整回答
反对 回复 2019-11-08

添加回答

回复

举报

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