Impossible d'accéder à @ViewChildren dans le composant parent

J'essaie d'obtenir le contrôle sur les instances enfants d'un composant et je ne peux pas dépasser une erreur. J'essaie de suivre les réponses de this issue. Le composant parent Sequence contient les composants enfants SequenceStep. Le parent contient la déclaration suivante:Impossible d'accéder à @ViewChildren dans le composant parent

@ViewChildren(SequenceStep) steps: QueryList<SequenceStep>;

alors je suis en train de faire quelque chose au sujet des enfants:

ngAfterViewInit() { 
    this.steps.changes.subscribe(steps => { 
     console.log(steps); 
    }); 
}

L'erreur que je reçois est:

metadata_resolver.js:639 Uncaught Error: Can't construct a query for the property "steps" of "Sequence" since the query selector wasn't defined.

alors que les composants Sequence et SequenceStep ont leurs sélecteurs définis dans leurs décorateurs @Component (sequence et sequence-step respectivement).

Qu'est-ce que je fais mal ici?

Source

2016-10-10 user776686

Pouvez-vous reproduire dans un plunker? –

@ GünterZöchbauer Désolé, il m'a fallu un certain temps pour recréer le plnkr, mais ici, il est: https://plnkr.co/edit/tusSBpbmyoG6TQTcV2i0?p=preview Il ne fonctionne pas (s'il vous plaît voir la console) - la question est: le code est-il correct? – user776686

Il y a quelques choses

Si vous passez les enfants de l'extérieur, ils se contentent pas d'enfants. @ViewChild() ne fonctionne que pour les enfants ajoutés au modèle d'un composant directement.

@ContentChildren() ouvrages sur le contenu transclus:
```
@ContentChildren(TheChild) kids: QueryList<TheChild>; 
```
this.kids.changes() n'informe des changements après l'initialisation. Par conséquent simplement accéder this.kids directement dans ngAfterViewInit() et puis pour s'abonner au sujet des changements plus tard informé
```
ngAfterViewInit() { 
    this.myKidsCount = this.kids.length; 
    this.cdRef.detectChanges(); 

    this.kids.changes.subscribe(kids => { 
     this.myKidsCount = kids.length; 
    }); 
} 
```
angulaire n'aime pas quand la détection de changement provoque des changements. ngAfterViewInit() est appelée par la détection de changement, c'est pourquoi this.myKidsCount = this.kids.length provoque une exception.

Pour contourner j'appelle la détection de changement explicitement après avoir modifié la propriété myKidsCount:

constructor(private cdRef:ChangeDetectorRef){} 

ngAfterViewInit() { 
    this.myKidsCount = this.kids.length; 
    this.cdRef.detectChanges(); 
}

Plunker example

Source

2016-10-15 10:38:25

Avez-vous essayé d'ajouter des citations à votre argument @ViewChildren?

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

Source

2016-10-11 09:39:10 lmetdaoui

Les guillemets servent uniquement à interroger les noms de variable de gabarit, lors de l'interrogation des types de composant ou de directive, aucune guillemets ne doit être utilisée. –

Merci pour le conseil. – lmetdaoui

cela a fonctionné pour moi –

Ce problème peut être lié à l'importation de SequenceStep, vérifiez le nom de classe de la ligne d'importation associée.

Source

2016-11-08 11:54:42

D'accord. De même, si vous avez une directive (ViewChild) définie dans le même fichier que le composant parent, la définition de la directive doit être prioritaire. – Miller

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

a marché pour moi. Angulaire 4.X.X Angulaire CLI 1.X.X

Source

2017-06-15 08:32:14 phacic

Impossible d'accéder à @ViewChildren dans le composant parent

Répondre

Questions connexes