Как сделать внутренний дочерний маршрут, чтобы получить routerLinkActive

Question

У меня есть угловое приложение, которое имеет компонент заголовка. Одна из ссылок в этом заголовке содержит еще 4 компонента, когда. Это означает, что когда я нажимаю на эту ссылку, первый компонент загружается, и маршрут / steps / step-one (маршрут домашней страницы и других страниц без / steps / ... Компонент steps содержит 4 компонента, а навигация осуществляется с помощью * ngIf.

Я использую routerLinkActive, чтобы показать пользователю активную страницу. Когда пользователь нажимает на ссылку, которая содержит 4 компонента, он может видеть, что он находится на странице шагов, а маршрут в URL-адресе - / steps / step-one. Но на этой странице есть кнопка, которая делает навигацию к / steps / step-two и активная ссылка исчезла.

Что я могу сделать, чтобы решить эту проблему?

приложение-steps.ts

 <app-step-one
      *ngIf="router.url === '/steps/step-one'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-one>

    <app-step-two
      *ngIf="router.url === '/steps/step-two'"
      [ngClass]="{'active': 'router.url === /steps/step-two'}"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-two>

    <app-step-three
      *ngIf="router.url === '/steps/step-three'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-three>

    <app-success
    *ngIf="router.url === '/steps/success'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-success>

Answer 1

Добро пожаловать в переполнение стека!

Попробуйте удалить приведенный выше код и заменить его на:

<router-outlet></router-outlet>

Затем отобразите каждый из ваших компонентов в этой розетке маршрутизатора. Затем ваши компоненты становятся перенаправленными, а не дочерними.

См. Документы для получения дополнительной информации: https://angular.io/guide/router#router-outlet