Как сохранить настройку routerLinkActive при маршрутизации на другую страницу компонента, связанную с текущей страницей?

Question

При маршрутизации к myloans ссылка навигации активна, но когда я нажимаю кнопку на этой странице для маршрута к syncmyloans, навигация больше не активна. Как сохранить активную навигацию при переходе к связанным подстраницам главной страницы навигации?

Навигация

<nav>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a [routerLink]="['/home']" [routerLinkActive]="['active']" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
            <a [routerLink]="['/myloans']" [routerLinkActive]="['active']" class="nav-link">My Loans</a>
        </li>
    </ul>
</nav>

Модуль маршрутизации

const routes: Routes = [
  { path: '', component: LandingComponent },
  { path: 'home', component: HomeComponent },
  { path: 'myloans', component: MyLoansComponent },
  { path: 'syncmyloans', component: SyncLoansComponent },

HTML

<button type="submit" [routerLink]="['/syncmyloans']" class="btn btn-outline-primary btn-md btn-rounded shadow custom pt-2 pl-3">
    <span>Sync My Loans</span>
    <i class="fa fa-arrow-circle-right ml-5" aria-hidden="true" style="vertical-align: middle;"></i>
</button>

Модуль маршрутизации сейчас

 { path: 'myloans', component: MyLoansComponent,
    children: [
      { path: 'syncmyloans', component: SyncLoansComponent }
    ]  
  }];

кнопка

<button type="submit" [routerLink]="['/myloans/syncmyloans']" class="btn btn-outline-primary btn-md btn-rounded shadow custom pt-2 pl-3">
    <span>Sync My Loans</span>
    <i class="fa fa-arrow-circle-right ml-5" aria-hidden="true" style="vertical-align: middle;"></i>
</button>

Answer 1

Вам нужно будет правильно добавить маршрутизацию. Это простая концепция маршрутизации. В настоящее время все ваши маршруты находятся на одном уровне.

Правильный способ реализовать это, вам нужно будет сделать так, чтобы SyncLoansComponent дочерние элементы маршрутизировали ваш MyLoansComponent.

Это приведет вас к реализовать дочерние маршруты в массиве Routes следующим образом: -

const routes: Routes = [
  { path: '', component: LandingComponent },
  { path: 'home', component: HomeComponent },
  { path: 'myloans', component: MyLoansComponent,
    children: [
     { path: 'syncmyloans', component: SyncLoansComponent}
    ]
  }
 ];

Итак, теперь ваш путь будет похож на {{your_app_url}}/myloans/syncmyloans

Теперь, чтобы отобразить ваш дочерний компонент, то есть syncmyloans, вам нужно будет использовать <router-outlet> в родительском компоненте в том месте, где вы хотите отобразить дочерний компонент.

Кроме того, обратитесь к этой ссылке, чтобы реализовать дочерние маршруты в angular.

https://www.techiediaries.com/angular/angular-9-nested-routing-child-routes-example/

Answer 2

Согласно маршрутизатору, они не связаны.

Вы можете

1. SyncLoansComponent дочерний маршрут MyLoansComponent, поэтому URL-адрес будет "myloans/syncmyloans"
2. Или вы можете вручную добавить класс "active" на панель навигации, прослушивая роутер и добавляя свой собственный logi c для установки некоторой переменной.