Активировать вкладку по умолчанию при загрузке страницы 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