Angular 4 - 嵌套的 @ViewChild 未定义

Question

I'm having trouble to get a @ViewChild annotated field properly initialized under following circumstance:

A @ViewChild annotated field stays undefined under certain circumstances:

• Parent component of type X implements abstract base class of type XBase , which has three abstract fields
• Component of type X annotates these field with @ChildView of types A , B and C
• C in turn also extends XBase , but uses a different template and selector than X
• Fields of type A and B get propery initialized in component of type X
• Field of type C stays undefined

This is the shortened version of my code

@Component({
    moduleId: module.id,
    selector: 'drive-view'
    templateUrl: './../../html/drive-view.html'
})   
export class DriveViewComponent extends GridView<Drive>
{
    @ViewChild(DriveGridComponent)
    public grid: DriveGridComponent;

    @ViewChild(DriveDetailsComponent)
    public itemDetails: DriveDetailsComponent;

    @ViewChild(DriveFilterModalComponent)
    public filterModal: DriveFilterModalComponent;

    @ViewChild(DriveMembersModalComponent)
    public driveMembersModal: DriveMembersModalComponent;
}

export abstract class GridView<TEntity>
{
    public abstract grid: Grid<TEntity>;
    public abstract filterModal: IGridFilterModal;
    public abstract itemDetails: IGridItemDetails<TEntity>;
}

export abstract class Grid<TEntity>
{
    public abstract header: IGridHeader;
    public abstract body: IGridBody<TEntity>;
}

@Component({
    moduleId: module.id,
    selector: '[drive-grid]',
    templateUrl: './../../html/grid.html'
})    
export class DriveGridComponent extends Grid<Drive>
{
    @ViewChild(DriveGridHeaderComponent)
    public header: DriveGridHeaderComponent;

    @ViewChild(DriveGridBodyComponent)
    public body: DriveGridBodyComponent;
}

@Component({
    moduleId: module.id,
    selector: 'thead [grid-header]',
    templateUrl: './../../html/drive-grid-header.html'
})
export class DriveGridHeaderComponent implements IGridHeader
{
    // nothing to see here...
}

@Component({
    moduleId: module.id,
    selector: 'tbody [grid-body]',
    templateUrl: './../../html/drive-grid-body.html'
})
export class DriveGridBodyComponent implements IGridBody<Drive>
{
    // nothing to see here...
}

@Component({
    moduleId: module.id,
    selector: '[drive-members-modal]',
    templateUrl: './../../html/drive-members-modal.html'
})
export class DriveMembersModalComponent extends GridView<User> 
{
    @ViewChild(UserGridComponent)
    public grid: UserGridComponent;
}

@Component({
    moduleId: module.id,
    selector: '[user-grid]',
    templateUrl: './../../html/grid.html'
})
export class UserGridComponent extends Grid<User>
{ 
    @ViewChild(UserGridHeaderComponent)
    public header: UserGridHeaderComponent;

    @ViewChild(UserGridBodyComponent)
    public body: UserGridBodyComponent;
}

UserGridHeaderComponent and UserGridBodyComponent are equivalent to the Drive- Components.

And here are the relevant parts of html templates:

drive-view.html

<div class="row">
    <div class="col-lg-12"
         drive-filter-modal
         (onFilterApplyButtonEmitter)="onFilterApplyButton()">
    </div>
</div>
<div class="row">
    <div class="col-lg-12"
         drive-members-modal>
    </div>
</div>
<div class="row" [hidden]="!grid.body?.items">
    <div class="col-lg-12"
          drive-grid
          (onColumnHeaderToggledEmitter)="onColumnHeaderToggled($event)"
          (onDetailsButtonEmitter)="onDetailsButton($event)">
    </div>
</div>
<div class="row"
     id="row-grid-item-details">
    <div class="col-lg-12"
         [@detailsSlideUpDown]="itemDetails.fadeInOutStatus">
        <item-details (onOpenModalEmitter)="onDriveMembersButton()"></item-details>
    </div>
</div>

grid.html

<div class="table-responsive">
  <table class="grid table table-hover">
    <thead grid-header (onColumnHeaderToggledEmitter)="onColumnHeaderToggled($event)"></thead>
    <tbody grid-body (onDetailsButtonEmitter)="onDetailsButton($event)"
           [ngClass]="{'fadeIn': body?.items, 'fadeOut': !body?.items}"
           class="animated"></tbody>
  </table>
</div>

drive-members-modal.html

<div class="modal fade" id="drive-members-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Members of 'NAME'</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12"
                         user-grid
                         (onColumnHeaderToggledEmitter)="onColumnHeaderToggled($event)"
                         (onDetailsButtonEmitter)="onDetailsButton($event)">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <span class="glyphicon glyphicon-chevron-left"></span> Back
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

So what I'm trying to do is to reuse the GridView<T> in shape of the DriveMembersModalComponent within the DriveViewComponent . It is supposed to render a similar grid within the bootstrap modal that pops up, when the user wants to view the members of a drive.

However DriveViewComponent 's driveMembersModal does not get fully initialized. Its

@ViewChild(UserGridComponent)
public grid: UserGridComponent;

stays undefined. It seems like angular can't find a matching element in the template. I've tried with different selectors with no effect. I've also tried the @ViewChild(<reference>) syntax, where a #reference attribute is added to the element. However this gives me a ElementRef , which I don't know how to handle. It appears to be just a DOM-reference, but not an angular component.

EDIT:

I've created a plunker example from my app: https://embed.plnkr.co/083a5AnkaiCG796adTkR/

Follow these instructions to reproduce the error:

• Open up your browser's debug mode to see the console output
• Click on the "Drives" tab
• The console will print the DriveMembersModalComponent , it corresponds to component C mentioned above. The grid field is undefined . The print is executed in the DriveViewComponent 's ngAfterViewInit()

Answer 1

After breaking down the above example to a minimal piece of code, I figured out the reason for the @ViewChild staying undefined:

Angular did not throw any error though I was missing an export statement for the module I imported. This happens when you don't use an explicit html tag for your template.

You can observe this behavior following short plunker:

https://plnkr.co/edit/kPKSbPS86iJ1oVCA4WSj?p=preview

If you uncomment line 26 in src/module.ts , App 's @ViewChild will be properly rendered. An error is only raised if you change the template's <div> tag to <component-a> . Then Angular will complain about the unknown element and ask you to check, whether it is an Angular component.

Answer 2

I had a similar error, but It was just because I'm a noob. Turns out if you try to access a ViewChild in the constructor for a component, it doesn't exist yet, and is undefined...

I moved the code that accessed my ViewChild 's to ngAfterViewInit and it worked like a charm.

PS Anything with an Ion Directive like ngIf/ngFor also seem to dislike being bound, which I guess makes sense since their existence is kind of dependant anyway.

Answer 3

在核心导入中添加 ViewChild

import { Component, OnInit,ViewChild } from '@angular/core';