动态标签内容呈现

Question

我正在开发标签组件，我希望Angular只渲染和初始化活动标签而不是所有标签。怎么办呢？

<my-tabs>
  <my-tab [tabTitle]="'Tab1'">
    <some-component></some-component>
  </my-tab>
  <my-tab [tabTitle]="'Tab2'">
    <some-component2></some-component2>
</my-tabs>

Basicaly在这种情况下，第一个浴缸处于活动状态，因此<some-component></some-component>应该初始化，但<some-component2></some-component2>不应该因为Tab2不活动

Answer 1

在组件上使用*ngIf。当值为false时，组件将从DOM中删除，因此不会初始化。大致像：

  <my-tab [tabTitle]="'Tab1'">
    <some-component *ngIf="tabOneActive" ></some-component>
  </my-tab>