Question

我在Angular 2应用程序中使用bootstrap nav-pills。当用户从另一个组件返回此页面时，我想将用户选择的选项卡显示为活动选项卡。因此，用户从此组件转到另一个组件，然后返回此处，这时我希望用户看到他选择的相同选项卡。如果我使用[ngClass]设置活动标签，则标签不能正常工作 - 标记不起作用，但标签内容不会改变。

代码：

{{1另外，当用户回到此页面时，第一个是Personal 标签内容始终显示为活动状态。我看到了一些js解决方案，其中活动标签存储在本地存储中。我可以获得非js答案吗？谢谢。 Bootstrap版本 - 3.3.7，Angular - 5

另外，我试图通过在html中使用＃<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>设置li元素的id来手动触发选项卡的click（）事件我的component.ts中有<li #g ...，但在页面呈现之后，它显示了第一个标签，只有选中时才是“个人”。

Answer 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>

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

Angular 5中的Bootstrap：返回页面时如何激活选定的选项卡

1 个答案: