typescript – Angular 2 @ViewChild注释返回undefined

发布时间：2020-12-17 08:29:04 所属栏目：安全来源：网络整理

导读：我试图学习Angular 2。我想使用@ViewChild注释从父组件访问子组件。这里有一些代码行：在BodyContent.ts我有： import {ViewChild,Component,Injectable} from 'angular2/core';import {FilterTiles} from '../Components/FilterTiles/FilterTiles';@Comp

我试图学习Angular 2。

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

这里有一些代码行：

在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’，injector)：

import {ViewChild,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到控制台日志，我得到“未定义”，当然，当我尝试推动内部的“tiles”数组(没有属性瓷砖“未定义”)时，我得到一个异常。

还有一件事：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
    }
}

希望有帮助。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!