无法在非活动状态 ngb-tabset 中访问我的组件引用

Question

我正在开发 ng-bootstrap 组件 ngb-tabset。我有 2 个选项卡，每个选项卡包含一个 child 组件。

<ngb-tabset #tabSet="ngbTabset" *ngIf="!user; else userView">
<ngb-tab id="child1" title="Child 1">
    <ng-template ngbTabContent>
      <mt-child-one></mt-child-one>
    </ng-template>
  </ngb-tab>
  <ngb-tab id="child2" title="Child 2">
    <ng-template ngbTabContent>
      <mt-child-two></mt-child-two>
    </ng-template>
  </ngb-tab>
</ngb-tabset>
<ng-template #userView>
<mt-user></mt-user>
</ng-template>

在我的 component.ts 文件中，我试图访问这两个 child 的引用，例如：

@ViewChild(Child1Component) child1Component: Child1Component;
@ViewChild(Child2Component) child2Component: Child2Component;

我在这里面临的问题是在我的 ngOnInit 中，我可以访问我的活动选项卡组件引用，但无法获取非活动选项卡的引用。

我尝试将非活动选项卡放在 afterViewInit 下，但它仍然 returns undefined。谁能指导我在这里做错了什么？

Answer 1

如果您将 [destroyOnHide]="false" 添加到 ngb-tabset 中，这将防止 Angular 在标签隐藏时破坏它（来源：NgbTabset docs）

<ngb-tabset #tabSet="ngbTabset" *ngIf="!user; else userView" [destroyOnHide]="false">
  <ngb-tab id="child1" title="Child 1">
      ...
  </ngb-tab>
  <ngb-tab id="child2" title="Child 2">
      ...
  </ngb-tab>
</ngb-tabset>

这意味着您可以访问组件 ngAfterViewInit 中的两个选项卡（可见和隐藏）：

注意：您需要使用 AfterViewInit 而不是 OnInit

请参阅 this Stackblitz 的演示（只需打开控制台，您应该会看到以下日志记录）：

无法在非活动状态 ngb-tabset 中访问我的组件引用

Can't access my component reference within inactive ngb-tabset

ng-bootstrap

angular