打字稿错误:@viewChild 未定义

问题描述

尝试使用 Ionic Tabs 文档中 tabs.ts 中的 select() 方法.但似乎当我尝试运行它时，它说选择未定义"，当我尝试 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/

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 文档,

ViewChild 在视图初始化后设置

和

ViewChild 在视图被检查后更新

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 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！