如何激活引导选项卡，打开的选项卡的内容以编程方式使用角

Question

我简单地重定向到的个人资料页与路由器片段（/＃的个人资料收藏），其中最喜欢的是引导选项卡组件。默认情况下，第一个选项卡是活动的，最喜欢的标签是2在我的情况，我想以编程方式激活从URL retriving片段的名称。

我得到的片段从URL中使用：

this.activatedRoute.fragment.subscribe(fragment => {
  console.log('fragment : ', fragment);
});

我的标签结构是：

<ul class="nav nav-tabs">
    <li class="active"> <a data-toggle="tab" href="#myPets"> My Pets</a> </li>
    <li><a data-toggle="tab" href="#favorites">Favorites</a></li>
    <li *ngIf="!userDetails?.isSocialSiteUser">
    <a data-toggle="tab" href="#changePassword">Change Password</a>
    </li>
    <!-- <li><a data-toggle="tab" href="#account"> Account</a></li> -->
    <li> <a data-toggle="tab" href="#meets">Upcoming Meet and Greets</a> </li>
    <li> <a data-toggle="tab" href="#myDeals" *ngIf="myDeals.length">My Deals</a> </li>
</ul>

<div class="tab-content">
    <div id="myPets" class="tab-pane overflow-y-500-x-hide fade in active" #myPets>
    ...
    </div>

    <div id="favorites" class="overflow-y-500-x-hide tab-pane fade" #favorites>
    <sfl-profile-favorites></sfl-profile-favorites>
    </div>

    ...

</div>

现在，我不知道如何激活收藏夹选项卡。也许这可以通过切换in active类来实现，但如何从所有其他选项卡中删除和添加到特定的标签？

Answer 1

你可以存储片段和模板文件应用active类条件

this.activatedRoute.fragment.subscribe(fragment => {
  this.currentFragment = fragment //store somewhere
});

在模板文件[ngClass]="{'class': true}"

<li [ngClass]="{'active': currentFragment === '/profile#myPets'}">
    <a data-toggle="tab" href="#myPets"> My Pets</a> </li>

<li [ngClass]="{'active': currentFragment === '/profile#favorites'}">
    <a data-toggle="tab" href="#favorites">Favorites</a></li>

<div id="favorites" class="overflow-y-500-x-hide tab-pane fade" 
    [ngClass]="{'active': currentFragment === '/profile#favorites'}"
     #favorites>.....</div>