无法在无效的ngb-tabset中访问我的组件引用

Question

我正在使用ng-bootstrap组件 ngb-tabset 。我有2个标签，每个标签包含一个子组件。

<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 文件中，我试图访问这两个孩子的引用，例如：

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

我在这里遇到的问题是在我的 ngOnInit 内部，我可以访问我的活动标签组件引用，但无法获取非活动标签的引用。

我尝试将非活动标签放在 afterViewInit 下，但仍然返回 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进行演示（只需打开控制台，您应该会看到以下日志记录）：