Typescript错误：@viewChild undefined

Question

尝试从Ionic选项卡文档的tabs.ts中使用select（）方法。但似乎当我尝试运行它时，它说“select is undefined”，我发现我的viewChild实际上是空的/未定义，当我尝试console.log（标签）。试图寻找为什么viewChild未定义，但无法真正理解为什么的原因。

链接到离子标签文档： 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

就像你可以在Angular Docs看到，

ViewChild is set after the view has been initialized

和

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

    // ... 

} 

所以在你的代码的问题是，在执行构造函数时的观点尚未初始化。你需要把所有的与在ngAfterViewInit生命周期挂钩的标签交互的代码：

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

如果你只是想用离子定制生命周期事件，你需要使用ionViewDidEnter钩：

export class TabsPage { 

@ViewChild('myTabs') tabRef: Tabs; 

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

}