Angular6.2升级至11后@ViewChild在<tabset>中失效问题

问题本质 #

Angular升级到11+并搭配ngx-bootstrap 5.x时，tab组件默认会在隐藏时销毁内部内容（destroyOnHide默认值为true），只有激活的tab才会渲染对应的子组件。这就导致未激活的Upload tab里的app-upload组件并未初始化，@ViewChild('uploadTab')自然拿不到实例，调用其方法时就会报错。

方案一：禁用tab内容的自动销毁 #

修改Upload tab的配置，添加[destroyOnHide]="false"，确保即使tab未激活，内部组件也会保持初始化状态：

<tab [destroyOnHide]="false" [disabled]="item.value.data.isDeprecated || !item.value.data.manualUploadAllowed || !hasUploadPermission" heading="Upload" (select)="selectTab(2)">
  <p>test Upload tab inside reports tab</p>
  <app-upload #uploadTab [reportType]="reportType" [showRVASelection]="showRVASelection" [hasRVAForm]="hasRVAForm" [packageorPageId]="packageorPageId" [date]="date" [uploadWarningMessage]="uploadWarningMessage" [uploadErrorMessage]="uploadErrorMessage"></app-upload>
</tab>

同时确保@ViewChild配置符合Angular 8+的规范（因tab在*ngIf中，需指定static: false）：

@ViewChild('uploadTab', { static: false }) uploadTab: UploadComponent;

方案二：改用单向数据流+子组件内部响应（推荐） #

避免直接依赖子组件实例，通过输入属性传递数据，让子组件自行监听变化并执行逻辑，更符合Angular组件设计原则：

1. 在UploadComponent中添加ngOnChanges监听输入属性变化：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html'
})
export class UploadComponent implements OnChanges {
  @Input() showRVASelection: boolean;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['showRVASelection']) {
      this.checkRVASelection();
    }
  }

  checkRVASelection() {
    // 原有方法逻辑
  }
}

2. 父组件仅更新输入属性，无需直接调用子组件方法：

rvaApplicable() {
  this.subscriptions.push(this._dataService.validatePackagePED(this.packageId, this.date, this.date).subscribe(data => {
    this.showRVASelection = data['showRVASelection'];
    this.hasRVAForm = data['hasRVAForm'];
    this.uploadErrorMessage = data['uploadErrorMessage'];
    this.uploadWarningMessage = data['uploadWarningMessage'];
    // 移除直接调用子组件的代码，依靠输入属性自动触发逻辑
  }));
}

方案三：在tab激活后延迟调用方法 #

如果必须保留直接调用子组件方法的逻辑，可以在tab激活后等待组件渲染完成再执行操作：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

selectTab(tabId: number) {
  // some logic
  this.rvaApplicable();
  // 切换到Upload tab时，等待变化检测完成后调用方法
  if (tabId === 2) {
    this.cdr.detectChanges();
    setTimeout(() => {
      this.uploadTab?.checkRVASelection();
    }, 0);
  }
  // some more logic
}

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