Question

我只是使用路由器片段（/ profile＃favorites）重定向到“个人资料”页面，其中“我的最爱”是Bootstrap选项卡组件。默认情况下，在我的情况下，第一个选项卡处于活动状态，而“我的最爱”选项卡为2，我想以编程方式激活从网址中检索片段的名称。

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

如何使用Angular以编程方式激活Bootstrap选项卡并打开选项卡内容

1 个答案: