Angular6 @ViewChild non défini avec ngIf

Question

J'ai un problème avec @ViewChild avec un composant affiché via ngIf. J'ai trouvé différentes solutions mais personne ne m'a été utile. Ceci est mon composant principal, composé de diverses étapes (je n'en ai montré que 2 en code pour plus de brièveté) avec un bouton pour la navigation vers l'avant et un bouton pour réinitialiser le composant retournant à la première étape. La première étape est indiquée sur l'ouverture de la page:

...
<div class="my-container">
    <first-child *ngIf="showFirtChild"></first-child>
    <second-child *ngIf="showSecondChild"></second-child>
</div>
<button (click)="goToNextStep()"></button>
<button (click)="reset()"></button>
...

export class MainComponent implements OnInit {
    @ViewChild(FirstChild) private firstChildComp: MyFirstChildComponent;
    showFirtChild: boolean = true;

    ngOnInit() {
        //here firstChildComp is defined
    }

    //code for navigate through steps
    reset() {
        this.showFirtChild= true;
        this.firstChildComp.fillTable(); //fillTable is a function defined in MyFirstChildComponent
    }
...
}

Pendant les étapes de navigation, la référence à firstChildComp est perdue et lorsque reset () est appelé, childComp résulte indéfini. Je sais que la cause est ngIf, j'ai donc essayé d'utiliser ngAfterViewInit:

ngAfterViewInit() {
    this.fcomp = this.firstChildComp;
}

reset() {
        this.showFirtChild= true;
        this.fcomp .fillTable();
}

mais cela ne résout pas mon problème. Toute suggestion?

Answer 1

Si vous recherchez toujours une réponse, vous pouvez également essayer de définir la valeur de l'indicateur statique sur true. Cela fera charger le composant enfant viewContainerRef en fonction de la valeur ngIf.