代码之家  ›  专栏  ›  技术社区  ›  Abhishek

无法在非活动ngb选项卡集中访问我的组件引用

  •  0
  • Abhishek  · 技术社区  · 5 年前

    我正在研究ng引导组件 ngb标签集 . 我有两个选项卡,每个选项卡包含一个子组件。

    <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>
    

    组件技术

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

    我现在面临的问题在我的内心深处 ,我可以访问活动选项卡组件引用,但无法获取非活动选项卡的引用。

    我试着把不活动的标签放在下面 afterViewInit ,但它还是回来了 未定义 . 谁能告诉我我做错了什么?

    1 回复  |  直到 5 年前
        1
  •  2
  •   Ian A    5 年前

    如果你加上 [destroyOnHide]="false" ngb-tabset 这将防止在隐藏选项卡时销毁该选项卡(来源: 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 对于演示(只需打开控制台,您将看到以下日志):

    enter image description here