入力エラー：@viewChildは未定義です

Question

Ionicタブのドキュメントのtabs.tsでselect（）メソッドを使用して試行しました。しかし、私はそれを実行しようとしたときに、 "選択は未定義です"と言い、console.log（タブ）を試したときにviewChildが実際に空である/未定義であることがわかった。 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

012で見ることができると同じように

と

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

    // ... 

} 

だからあなたのコードの問題は、コンストラクタが実行されたときにビューが初期化されていないということです。あなただけのイオンのカスタムライフサイクルイベントを使用する場合は、ionViewDidEnterフックを使用する必要があるだろう、

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

：あなたはngAfterViewInitライフサイクルフックのタブと対話するすべてのコードを配置する必要があると思い

export class TabsPage { 

@ViewChild('myTabs') tabRef: Tabs; 

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

}