Typoskriptfehler: @viewChild undefined

Question

Versucht mit der select() -Methode in Tabs.ts aus der Ionic Tabs-Dokumentation. Aber es scheint, dass wenn ich es ausprobierte, es sagt, dass "Auswahl ist undefiniert" und ich fand, dass mein viewChild wirklich leer/undefined ist, als ich console.log (Registerkarten) versuchte. Versucht, nach dem Grund zu suchen, warum viewChild nicht definiert ist, aber nicht wirklich verstehen konnte warum.

Link zu ionischen Registerkarten Dokumentation: https://ionicframework.com/docs/api/components/tabs/Tabs/

tabs.html

<ion-tabs #tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Request" tabIcon="alert"></ion-tab> 
    <ion-tab [root]="tab2Root" [rootParams]="detailParam" tabTitle="Pending" 
    tabIcon="repeat"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="Completed" tabIcon="done-all"></ion- 
    tab> 
    <ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="person"></ion-tab> 
</ion-tabs> 

tabs.ts

import { Component, ViewChild } from '@angular/core'; 
import { NavController, NavParams, AlertController, Tabs } from 'ionic- 
angular'; 
import { PendingJobPage } from '../pending-job/pending-job'; 
import { CompletedJobPage } from '../completed-job/completed-job'; 
import { RequestPage } from '../request/request'; 
import { ProfilePage } from '../profile/profile'; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 

    @ViewChild('tabs') tabRef: Tabs; 
    pending: any; 
    apply: boolean; 
    detailsParam: any; 

    tab1Root = RequestPage; 
    tab2Root = PendingJobPage; 
    tab3Root = CompletedJobPage; 
    tab4Root = ProfilePage; 

    constructor(public navParams: NavParams, public navCtrl: NavController) { 
    this.pending = this.navParams.get('param1'); 
    this.apply = this.navParams.get('apply'); 
    this.detailsParam = this.navParams.data; 
    console.log("a = ", this.tabRef); 

    if(this.apply === true){ 
     this.navCtrl.parent.select(1); 
    } 
    else{ 
     this.navCtrl.parent.select(0); 
    } 
    } 
} 

Answer 1

Genau wie Sie in Angular Docs sehen können,

ViewChild is set after the view has been initialized

und

ViewChild is updated after the view has been checked

export class AfterViewComponent implements AfterViewChecked, AfterViewInit { 

    ngAfterViewInit() { 
    // viewChild is set after the view has been initialized <- Here! 
    } 

    ngAfterViewChecked() { 
    // viewChild is updated after the view has been checked <- Here! 
    } 

    // ... 

} 

Also das Problem auf Ihrem Code ist, dass die Ansicht nicht initialisiert wurde, wenn der Konstruktor ausgeführt wird. Sie müssten den gesamten Code setzen, die mit den Registerkarten im ngAfterViewInit Lifecycle Haken interagiert:

ngAfterViewInit() { 
    // Now you can use the tabs reference 
    console.log("a = ", this.tabRef); 
    } 

Wenn Sie nur Ionic individuelle Lebenszyklusereignisse verwenden möchten, müssten Sie den ionViewDidEnter Haken verwenden:

export class TabsPage { 

@ViewChild('myTabs') tabRef: Tabs; 

ionViewDidEnter() { 
    // Now you can use the tabs reference 
    console.log("a = ", this.tabRef); 
} 

}