Question

我有一个显示多个标签的组件，但根据业务的逻辑，它将是一个或另一个是活动的，如下所示：

<ul class="nav nav-tabs">
    <li *ngIf="activateTab1" class="active"><a data-toggle="tab" href="#tab1">
      <span class="fa fa-home fa-lg color-blue "></span> tab1</a></li>
    <li *ngIf="!activateTab1"><a data-toggle="tab" href="#tab1">
      <span class="fa fa-home fa-lg color-blue "></span> tab1</a></li>

    <li *ngIf="activateTab2" class="active"><a data-toggle="tab" href="#tab1">
      <span class="fa fa-home fa-lg color-blue "></span> tab2</a></li>
    <li *ngIf="!activateTab2"><a data-toggle="tab" href="#tab2">
      <span class="fa fa-home fa-lg color-blue "></span> tab1</a></li>
</ul>

<div class="tab-content">
    <div id="tab1" class="tab-pane fade">
      <app-component-tab1></app-component-tab1>
    </div>
    <div id="tab2" class="tab-pane fade">
      <app-component-tab2></app-component-tab2>
    </div>
</div>

使用此代码可以正确激活选项卡，但选项卡的内容（角度组件）不会重新充电。我想这可能是因为标签没有被点击而且＆＃34; href＆＃34;不叫。那怎么能这样呢？提前谢谢。

Answer 1

为什么使用ngIf？在这种情况下， ngClass 更好。您也应该使用class =“active”作为tab-pane。

<ul class="nav nav-tabs">
    <li [ngClass]="{'active': activateTab1}">
        <a data- toggle="tab" href="#tab1">
            <span class="fa fa-home fa-lg color-blue "></span>tab1
        </a>
    </li>

    <li [ngClass]="{'active': !activateTab1}">
        <a data- toggle="tab" href="#tab2">
            <span class="fa fa-home fa-lg color-blue "></span>tab2
        </a>
    </li>
</ul>

<div class="tab-content">
    <div id="tab1" class="tab-pane fade" [ngClass]="{'active': activateTab1}">
        <app-component-tab1></app-component-tab1>
    </div>
    <div id="tab2" class="tab-pane fade" [ngClass]="{'active': !activateTab1}">
        <app-component-tab2></app-component-tab2>
    </div>
</div>

希望有所帮助

Answer 2

这是一个基于Angular / CSS的解决方案。你需要填写你想要的CSS。

我使用类和CSS来隐藏和显示内容部分，并在顶部显示选项卡。我使用Angular来更改正在查看的选项卡。反过来，这会更改最外层class的{{1}}值，这是CSS工作的原因。

<div>

Answer 3

由于我还有机会选择库，我最终使用了PrimeNG的p-tabView（https://www.primefaces.org/primeng/#/）。通过这种方式，任务得以简化，开发更侧重于Angular。它会是这样的：

 <p-tabView>
    <p-tabPanel header="tab1" leftIcon="fa-home" [selected]="activateTab1">
      <app-component-tab1></app-component-tab1>
    </p-tabPanel>
    <p-tabPanel header="tab2" leftIcon="fa-home" [selected]="activateTab2">
      <app-component-tab2></app-component-tab2>
    </p-tabPanel>
  </p-tabView>

如何在更改活动引导选项卡后刷新角度内容？

3 个答案: