Angular点击Assign按钮报selectTab未定义TypeError错误

抛出Cannot read properties of undefined (reading 'selectTab')是因为调用selectTab方法时，@ViewChild查询到的tabComponent实例为undefined，由三个问题共同导致：

• @ViewChild配置错误：使用{ static: true }配置时，Angular仅会在首次变更检测运行前查询一次目标实例，不会在视图更新后同步查询结果，不适合需要调用实例方法的场景。
• 时序问题：ngOnInit中的接口请求是异步执行，回调触发时机可能早于视图初始化完成的时间点，此时tabComponent还未被Angular赋值；点击按钮触发事件时也可能因变更检测未同步完成，出现短暂的实例为空的情况。
• 隐藏逻辑bug：原有openAssignSectionTab方法仅调用了tabs组件的切换方法，没有同步更新组件自身的selectedTab属性，哪怕不报错，也会出现tab头切换到assign-tab，但<app-sections>因*ngIf条件不满足无法渲染的问题。

1. 修正@ViewChild配置 #

移除static: true配置，使用Angular默认的查询策略（static: false），该策略会在每次变更检测后同步查询结果，在ngAfterViewInit钩子触发前完成实例赋值：

// 原代码
// @ViewChild('tabComp', { static: true }) tabComponent: EditorTabsComponent;
// 修改后
@ViewChild('tabComp') tabComponent!: EditorTabsComponent;

属性后的!是TS非空断言，告诉TS该属性会在视图初始化后被Angular赋值，不需要初始化校验。

2. 增加实例判空与状态同步 #

修改openAssignSectionTab方法，先同步更新selectedTab状态保证对应内容能正常渲染，同时判断tabComponent实例存在后再调用方法，避免空指针报错：

openAssignSectionTab() {
  // 同步更新选中tab状态，保证*ngIf条件能正确匹配渲染对应组件
  this.selectedTab = 'assign-tab';
  // 实例存在才执行方法调用
  if (this.tabComponent) {
    this.tabComponent.selectTab(this.tabs[1]);
    this.pendingTabSwitch = false;
  } else {
    // 实例不存在时打标记，等视图初始化完成后再执行切换
    this.pendingTabSwitch = true;
  }
}

3. 处理异步时序导致的切换失效 #

在组件中增加标记位，在ngAfterViewInit生命周期中处理提前触发的tab切换请求，避免接口回调早于视图初始化导致切换失效：
首先在组件类中增加标记属性，同时引入AfterViewInit生命周期接口：

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

// 组件类实现AfterViewInit接口
export class PaperComponent implements OnInit, AfterViewInit {
  // 原有属性...
  private pendingTabSwitch = false;

  // 实现ngAfterViewInit钩子
  ngAfterViewInit(): void {
    if (this.pendingTabSwitch) {
      // 套一层setTimeout规避Angular变更检测周期冲突报错
      setTimeout(() => {
        this.tabComponent.selectTab(this.tabs[1]);
        this.pendingTabSwitch = false;
      });
    }
  }

  // 原有代码...
}

修复完成后可以验证两个场景：

• 页面带page=assign查询参数进入时，会自动正常切换到Assign Sections tab，无控制台报错
• 点击User组件内的Assign按钮时，能正常切换到Assign Sections tab，加载app-sections组件内容

内容的提问来源于stack exchange，提问作者Arun