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

我只是用路由器片段（/Profile#favorites）重定向到Profile页面，其中favorite是引导选项卡组件。默认情况下，第一个选项卡是活动的，在我的例子中，最喜欢的选项卡是2，我希望通过编程激活从url检索片段名称

我通过以下方式从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>

...
...

---

现在我不知道如何激活收藏夹选项卡。也许这可以通过在active类中切换

来实现，但是如何从所有其他选项卡中删除并添加到特定选项卡？
您可以在模板文件中存储片段并应用
active
类条件

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

在模板文件
[ngClass]=“{'class'：true}”





.....
太棒了！很简单，但我是疯了！谢谢现在面临的一个问题是，当我手动打开任何其他选项卡，然后使用fragment以编程方式转到收藏夹时，旧的选项卡内容会保留下来，收藏夹选项卡内容会附加在其上。[更新]我从导航选项卡中删除了数据切换属性，相反，我将routerlink与fragment放在一起，这对我来说很好。
<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>