Angular 5中的引导程序：返回页面时如何激活选择的选项卡答案

【问题标题】：Bootstrap in Angular 5: How to have selected tab active when coming back to the pageAngular 5中的引导程序：返回页面时如何激活选择的选项卡
【发布时间】：2018-02-16 19:39:53
【问题描述】：

我在我的 Angular 2 应用程序中使用引导导航药丸。当用户从另一个组件返回此页面时，我想将用户选择的选项卡显示为活动选项卡。所以用户从这个组件转到另一个，然后回到这里，这就是我希望用户看到他选择的同一个选项卡的时候。如果我使用 [ngClass] 设置活动选项卡，则选项卡无法正常工作 - 药丸可以工作，但选项卡内容不会改变。

代码：

<ul class="nav nav-pills nav-justified"> <li [ngClass]="{'active': 'p' == activeTab }" (click)="activeTab = 'p';"><a data-toggle="pill" href="#personal"><span class="fa fa-user fa-icon-right-margin-small"></span> Personal</a></li> <li [ngClass]="{'active': 'g' == activeTab }" (click)="activeTab = 'g';"><a data-toggle="pill" href="#group"><span class="fa fa-users fa-icon-right-margin-small"></span> Group</a></li> </ul>
此外，当用户返回此页面时，第一个页面，即 Personal 选项卡内容一直显示为活动状态。我看到了一些 js 解决方案，其中活动选项卡存储在本地存储中。我能得到一个非 js 的答案吗？谢谢。 Bootstrap 版本 - 3.3.7，Angular - 5

此外，我尝试通过在 html 中使用 # 将 li 元素的 id 设置为 <li #g ... 和 this.g.nativeElement.click(); // if active tab = 'g', g = group 来手动触发选项卡的 click() 事件我的component.ts，但是在页面呈现之后，它显示了第一个选项卡，即“个人”仅在选中时。

【问题讨论】：

标签： twitter-bootstrap angular5

【解决方案1】：

如果您使用 Angular RouterModule，那么您可以使用 routerLink 和 routerLinkActive 属性。这使您可以简单地自动指定一个命名类以添加到当前处于活动状态的任何 routerLink。

<ul class="nav nav-pills nav-justified">
    <li class="nav-item">
        <a class="nav-link" routerLink="personal" routerLinkActive="active">
            <span class="fa fa-user fa-icon-right-margin-small"></span> Personal
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="group" routerLinkActive="active">
            <span class="fa fa-users fa-icon-right-margin-small"></span> Group
        </a>
    </li>
</ul>

我已尝试保持代码的功能元素不变。希望这会有所帮助。

【讨论】：