L'annotation Angular 2 @ViewChild renvoie undefined

J'essaie d'apprendre Angular 2.

Je souhaite accéder à un composant enfant à partir d'un composant parent à l'aide de l' annotation @ViewChild .

Voici quelques lignes de code:

Dans BodyContent.ts, j'ai:

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);
    } 
}

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

Enfin voici les modèles (comme suggéré dans les commentaires):

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>

Le modèle FilterTiles.html est correctement chargé dans la balise ico-filter-tiles (en effet, je peux voir l'en-tête).

Remarque: la classe BodyContent est injectée dans un autre modèle (Body) à l'aide de DynamicComponetLoader: dcl.loadAsRoot (BodyContent, '# ico-bodyContent', injector):

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]
})


export class Filters {

    constructor(dcl: DynamicComponentLoader, injector: Injector) {
       dcl.loadAsRoot(BodyContent, '#ico-bodyContent', injector);
       dcl.loadAsRoot(SidebarContent, '#ico-sidebarContent', injector);

   } 
}

Le problème est que lorsque j'essaie d'écrire ftdans le journal de la console, j'obtiens undefined, et bien sûr, j'obtiens une exception lorsque j'essaie de pousser quelque chose à l'intérieur du tableau «tuiles»: «pas de tuiles de propriété pour« non défini »» .

Une dernière chose: le composant FilterTiles semble être correctement chargé, car je peux voir le modèle html correspondant.

Toute suggestion? Merci

J'ai eu un problème similaire et j'ai pensé publier au cas où quelqu'un d'autre aurait fait la même erreur. Tout d'abord, une chose à considérer est AfterViewInit; vous devez attendre que la vue soit initialisée avant de pouvoir accéder à votre @ViewChild. Cependant, mon @ViewChildretourne toujours nul. Le problème était mon *ngIf. La *ngIfdirective tuait mon composant de contrôles, donc je ne pouvais pas y faire référence.

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
    }
}

J'espère que cela pourra aider.

EDIT
Comme mentionné par @Ashg ci - dessous , une solution consiste à utiliser à la @ViewChildrenplace de @ViewChild.

Le problème, comme mentionné précédemment, est celui ngIfqui rend la vue non définie. La réponse est d'utiliser ViewChildrenau lieu de ViewChild. J'ai eu un problème similaire où je ne voulais pas qu'une grille soit affichée jusqu'à ce que toutes les données de référence aient été chargées.

html:

   <section class="well" *ngIf="LookupData != null">
       <h4 class="ra-well-title">Results</h4>
       <kendo-grid #searchGrid> </kendo-grid>
   </section>

Code de composant

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;
        });


    }
}

Ici, nous utilisons ViewChildrensur lequel vous pouvez écouter les changements. Dans ce cas, tous les enfants avec la référence #searchGrid. J'espère que cela t'aides.

Vous pouvez utiliser un setter pour @ViewChild()

@ViewChild(FilterTiles) set ft(tiles: FilterTiles) {
    console.log(tiles);
};

Si vous avez un wrapper ngIf, le setter sera appelé avec undefined, puis à nouveau avec une référence une fois que ngIf lui permettra de s'afficher.

Mais mon problème était autre chose. Je n'avais pas inclus le module contenant mes "FilterTiles" dans mes app.modules. Le modèle n'a pas généré d'erreur, mais la référence était toujours indéfinie.

Cela a fonctionné pour moi.

Mon composant nommé 'mon-composant', par exemple, était affiché en utilisant * ngIf = "showMe" comme ceci:

<my-component [showMe]="showMe" *ngIf="showMe"></my-component>

Ainsi, lorsque le composant est initialisé, le composant n'est pas encore affiché tant que "showMe" n'est pas vrai. Ainsi, mes références @ViewChild n'étaient pas définies.

C'est là que j'ai utilisé @ViewChildren et la QueryList qu'il renvoie. Voir l'article angulaire sur QueryList et une démonstration d'utilisation de @ViewChildren .

Vous pouvez utiliser la QueryList retournée par @ViewChildren et vous abonner à toutes les modifications apportées aux éléments référencés à l'aide de rxjs, comme indiqué ci-dessous. @ViewChild n'a pas cette capacité.

import { Component, ViewChildren, ElementRef, OnChanges, QueryList, Input } from '@angular/core';
import 'rxjs/Rx';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnChanges {

  @ViewChildren('ref') ref: QueryList<any>; // this reference is just pointing to a template reference variable in the component html file (i.e. <div #ref></div> )
  @Input() showMe; // this is passed into my component from the parent as a    

  ngOnChanges () { // ngOnChanges is a component LifeCycle Hook that should run the following code when there is a change to the components view (like when the child elements appear in the DOM for example)
    if(showMe) // this if statement checks to see if the component has appeared becuase ngOnChanges may fire for other reasons
      this.ref.changes.subscribe( // subscribe to any changes to the ref which should change from undefined to an actual value once showMe is switched to true (which triggers *ngIf to show the component)
        (result) => {
          // console.log(result.first['_results'][0].nativeElement);                                         
          console.log(result.first.nativeElement);                                          

          // Do Stuff with referenced element here...   
        } 
      ); // end subscribe
    } // end if
  } // end onChanges 
} // end Class

J'espère que cela aidera quelqu'un à gagner du temps et à éviter la frustration.

Ma solution de contournement était d'utiliser [style.display]="getControlsOnStyleDisplay()"au lieu de *ngIf="controlsOn". Le bloc est là mais il n'est pas affiché.

@Component({
selector: 'app',
template:  `
    <controls [style.display]="getControlsOnStyleDisplay()"></controls>
...

export class AppComponent {
  @ViewChild(ControlsComponent) controls:ControlsComponent;

  controlsOn:boolean = false;

  getControlsOnStyleDisplay() {
    if(this.controlsOn) {
      return "block";
    } else {
      return "none";
    }
  }
....

Ce qui a résolu mon problème était de m'assurer qu'il staticétait réglé sur false.

@ViewChild(ClrForm, {static: false}) clrForm;

Lorsque cette staticoption est désactivée, la @ViewChildréférence est mise à jour par Angular lorsque la *ngIfdirective change.

Ma solution était de remplacer *ngIf par [hidden]. L'inconvénient était que tous les composants enfants étaient présents dans le code DOM. Mais a fonctionné pour mes besoins.

Dans mon cas, j'avais un setter de variable d'entrée utilisant le ViewChild, et le ViewChildétait à l'intérieur d'une *ngIfdirective, donc le setter essayait d'y accéder avant le *ngIfrendu (cela fonctionnerait bien sans le *ngIf, mais ne fonctionnerait pas s'il était toujours défini sur vrai avec *ngIf="true").

Pour résoudre, j'ai utilisé Rxjs pour m'assurer que toute référence à l' ViewChildattendu jusqu'à ce que la vue soit lancée. Tout d'abord, créez un objet qui se termine après le début de la vue.

export class MyComponent implements AfterViewInit {
  private _viewInitWaiter$ = new Subject();

  ngAfterViewInit(): void {
    this._viewInitWaiter$.complete();
  }
}

Ensuite, créez une fonction qui prend et exécute un lambda une fois le sujet terminé.

private _executeAfterViewInit(func: () => any): any {
  this._viewInitWaiter$.subscribe(null, null, () => {
    return func();
  })
}

Enfin, assurez-vous que les références à ViewChild utilisent cette fonction.

@Input()
set myInput(val: any) {
    this._executeAfterViewInit(() => {
        const viewChildProperty = this.viewChild.someProperty;
        ...
    });
}

@ViewChild('viewChildRefName', {read: MyViewChildComponent}) viewChild: MyViewChildComponent;

Ça doit marcher.

Mais comme l'a dit Günter Zöchbauer , il doit y avoir un autre problème dans le modèle. J'ai créé un peu Relevant-Plunkr-Answer . Veuillez vérifier la console du navigateur.

boot.ts

@Component({
selector: 'my-app'
, template: `<div> <h1> BodyContent </h1></div>

      <filter></filter>

      <button (click)="onClickSidebar()">Click Me</button>
  `
, directives: [FilterTiles] 
})


export class BodyContent {
    @ViewChild(FilterTiles) ft:FilterTiles;

    public onClickSidebar() {
        console.log(this.ft);

        this.ft.tiles.push("entered");
    } 
}

filterTiles.ts

@Component({
     selector: 'filter',
    template: '<div> <h4>Filter tiles </h4></div>'
 })


 export class FilterTiles {
     public tiles = [];

     public constructor(){};
 }

Il fonctionne comme un charme. Veuillez vérifier vos étiquettes et références.

Merci...

Cela fonctionne pour moi, voir l'exemple ci-dessous.

import {Component, ViewChild, ElementRef} from 'angular2/core';

@Component({
    selector: 'app',
    template:  `
        <a (click)="toggle($event)">Toggle</a>
        <div *ngIf="visible">
          <input #control name="value" [(ngModel)]="value" type="text" />
        </div>
    `,
})

export class AppComponent {

    private elementRef: ElementRef;
    @ViewChild('control') set controlElRef(elementRef: ElementRef) {
      this.elementRef = elementRef;
    }

    visible:boolean;

    toggle($event: Event) {
      this.visible = !this.visible;
      if(this.visible) {
        setTimeout(() => { this.elementRef.nativeElement.focus(); });
      }
    }

}

J'ai eu un problème similaire, où ViewChildétait à l'intérieur d'une switchclause qui ne chargeait pas l'élément viewChild avant qu'il soit référencé. Je l'ai résolu de manière semi-hacky mais en encapsulant la ViewChildréférence dans un setTimeoutqui s'est exécuté immédiatement (ie 0 ms)

Ma solution à cela était de déplacer le ngIf de l'extérieur du composant enfant vers l'intérieur du composant enfant sur un div qui enveloppait la section entière de html. De cette façon, il était toujours caché quand il le fallait, mais j'ai pu charger le composant et je pouvais le référencer dans le parent.

Je le corrige en ajoutant simplement SetTimeout après avoir visible le composant

Mon HTML:

<input #txtBus *ngIf[show]>

Mon composant JS

@Component({
  selector: "app-topbar",
  templateUrl: "./topbar.component.html",
  styleUrls: ["./topbar.component.scss"]
})
export class TopbarComponent implements OnInit {

  public show:boolean=false;

  @ViewChild("txtBus") private inputBusRef: ElementRef;

  constructor() {

  }

  ngOnInit() {}

  ngOnDestroy(): void {

  }


  showInput() {
    this.show = true;
    setTimeout(()=>{
      this.inputBusRef.nativeElement.focus();
    },500);
  }
}

Dans mon cas, je savais que le composant enfant serait toujours présent, mais je voulais modifier l'état avant l'initialisation de l'enfant pour économiser du travail.

J'ai choisi de tester pour l'enfant jusqu'à ce qu'il apparaisse et d'apporter des modifications immédiatement, ce qui m'a sauvé un cycle de changement sur le composant enfant.

export class GroupResultsReportComponent implements OnInit {

    @ViewChild(ChildComponent) childComp: ChildComponent;

    ngOnInit(): void {
        this.WhenReady(() => this.childComp, () => { this.childComp.showBar = true; });
    }

    /**
     * Executes the work, once the test returns truthy
     * @param test a function that will return truthy once the work function is able to execute 
     * @param work a function that will execute after the test function returns truthy
     */
    private WhenReady(test: Function, work: Function) {
        if (test()) work();
        else setTimeout(this.WhenReady.bind(window, test, work));
    }
}

Alerte, vous pouvez ajouter un nombre maximum de tentatives ou ajouter un délai de quelques ms au setTimeout. setTimeoutjette efficacement la fonction au bas de la liste des opérations en attente.

Une sorte d'approche générique:

Vous pouvez créer une méthode qui attendra d' ViewChildêtre prête

function waitWhileViewChildIsReady(parent: any, viewChildName: string, refreshRateSec: number = 50, maxWaitTime: number = 3000): Observable<any> {
  return interval(refreshRateSec)
    .pipe(
      takeWhile(() => !isDefined(parent[viewChildName])),
      filter(x => x === undefined),
      takeUntil(timer(maxWaitTime)),
      endWith(parent[viewChildName]),
      flatMap(v => {
        if (!parent[viewChildName]) throw new Error(`ViewChild "${viewChildName}" is never ready`);
        return of(!parent[viewChildName]);
      })
    );
}


function isDefined<T>(value: T | undefined | null): value is T {
  return <T>value !== undefined && <T>value !== null;
}

Usage:

  // Now you can do it in any place of your code
  waitWhileViewChildIsReady(this, 'yourViewChildName').subscribe(() =>{
      // your logic here
  })

Pour moi, le problème était que je faisais référence à l'ID sur l'élément.

@ViewChild('survey-form') slides:IonSlides;

<div id="survey-form"></div>

Au lieu de comme ça:

@ViewChild('surveyForm') slides:IonSlides;

<div #surveyForm></div>

Si vous utilisez Ionic, vous devrez utiliser le ionViewDidEnter()crochet du cycle de vie. Ionic exécute des éléments supplémentaires (principalement liés à l'animation) qui provoquent généralement des erreurs inattendues comme celle-ci, d'où la nécessité de quelque chose qui s'exécute après ngOnInit , ngAfterContentInitetc.

Voici quelque chose qui a fonctionné pour moi.

@ViewChild('mapSearch', { read: ElementRef }) mapInput: ElementRef;

ngAfterViewInit() {
  interval(1000).pipe(
        switchMap(() => of(this.mapInput)),
        filter(response => response instanceof ElementRef),
        take(1))
        .subscribe((input: ElementRef) => {
          //do stuff
        });
}

Donc, fondamentalement, je vérifie chaque seconde jusqu'à ce que le *ngIfdevienne vrai, puis je fais mes trucs liés au ElementRef.

La solution qui a fonctionné pour moi a été d'ajouter la directive dans les déclarations dans app.module.ts