打字稿错误:@viewChild未定义 [英] Typescript error: @viewChild undefined

问题描述

尝试使用Ionic Tabs文档中tabs.ts中的select()方法.但是似乎当我尝试运行它时，它说"select is undefined"，当我尝试使用console.log(tabs)时，我发现viewChild实际上为空/未定义.尝试搜索未定义viewChild的原因，但无法真正理解为什么.

Tried using the select() method in tabs.ts from the Ionic Tabs documentation. But it seems that when I tried running it, it says that "select is undefined" and I found out that my viewChild is actually empty/undefined when I tried console.log(tabs). Tried searching for the reason why viewChild is undefined but could not really understand why.

链接到离子选项卡的文档: https://ionicframework.com/docs/api/components/tabs/Tabs/

Link to ionic tabs documentation: https://ionicframework.com/docs/api/components/tabs/Tabs/

tabs.html

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);
    }
  }
}

推荐答案

就像您在中看到的一样Angular Docs ，

在初始化视图后设置ViewChild

ViewChild is set after the view has been initialized

和

查看视图后更新ViewChild

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生命周期挂钩:

So the issue on your code is that the view has not been initialized when the constructor is executed. You'd need to put all the code that interacts with the tabs in the ngAfterViewInit lifecycle hook:

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

如果只想使用Ionic自定义生命周期事件，则需要使用ionViewDidEnter挂钩:

If you just want to use Ionic custom lifecycle events, you'd need to use the ionViewDidEnter hook:

export class TabsPage {

@ViewChild('myTabs') tabRef: Tabs;

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

}

这篇关于打字稿错误:@viewChild未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！