当页面加载Angular 4时设置默认选项卡处于活动状态答案

【问题标题】：set default tab active when page loads Angular 4当页面加载Angular 4时设置默认选项卡处于活动状态
【发布时间】：2017-11-30 22:05:09
【问题描述】：

我有一个带有 [routerLinkActive] 的工作侧菜单，当我单击它们时，它允许我获得一个活动选项卡。但是，我无法加载默认选项卡活动

这是我的 html 文件：

<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li><a href="#" id="cerrado">&nbsp;<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-folder-open"></span></a></li>
                  <li><a [routerLink]="['/deudas']" [routerLinkActive]="['activado']">Mi Deuda<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
                  <li><a [routerLink]="['/morosos']" [routerLinkActive]="['activado']">Listado de Morosos<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>
                  <li><a [routerLink]="['/estado']" [routerLinkActive]="['activado']">Estado de Ingresos y Gastos<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-transfer"></span></a></li>
                  <li><a [routerLink]="['/reservas']" [routerLinkActive]="['activado']">Reservas areas comunes/sociales<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
                  <li><a [routerLink]="['/reclamos']" [routerLinkActive]="['activado']">Reclamos<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-alert"></span></a></li>
                  <li><a [routerLink]="['/mantenimiento']" [routerLinkActive]="['activado']">Planes de Mantenimiento<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-log-in"></span></a></li>
                  <li><a [routerLink]="['/personal']" [routerLinkActive]="['activado']">Personal<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>
                </ul>
              </div>

这是我在页面加载时得到的

我希望第二个选项在第二张图片中默认处于活动状态，有什么想法可以实现吗？

【问题讨论】：

Angular2 default active link on site load的可能重复
这可行，但在我将其标记为重复之前，还有其他方法可以实现吗？

标签： angular routerlinkactive

【解决方案1】：

如果您想考虑其他选择，可以尝试以下方法：

<li [class.activado]="router.isActive('/deudas’)” />

IsActive 是您可以在文档中找到的另一种方法

https://angular.io/api/router/Router#isActive

【讨论】：

你能解释一下吗？
当然。所以在这里，只要赋值右侧的条件为真，您就将 css 类“activado”（我从您的示例中获取）设置为 li。因此，如果 router.isActive 条件返回 true，它将在 li 上设置 css 类。我现在看到你在 a 上上课，而不是在 li 上上课。但是您应该能够根据您的需要调整我的示例:)