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

Question

我有一个带有 [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>

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

我希望第二个选项默认处于活动状态，就像在第二张图片中一样，关于如何实现这一点的任何想法？

Answer 1

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

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

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

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