当页面加载Angular 4时,设置默认选项卡

时间:2017-11-30 22:05:10

标签: angular routerlinkactive

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

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

enter image description here

enter image description here

我想第二个选项默认是活动的,就像在第二张图片中一样,有关如何实现这一点的任何想法?

1 个答案:

答案 0 :(得分:0)

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

write $piece(tNameIn, ".", 1, *-1)

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

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