Routing in Angular 2+ app?

Question

Angular

<div *ngFor="let p of points"
    class="list-of-menu-container pointer menu-line"
    (click)="currentItem = p"
    [class.full-opacity]="p.route === currentItem?.route"
>
<div class="icon-wrap">
    <i class="fa icon gray-icon" [ngClass]="[p.icon]"></i>
</div>
<div [ngClass]="{'hidden': !(fixedMenu || hoveredMenu), 'visible': !!(fixedMenu || hoveredMenu)}" class="main-text">
    <a [routerLink]="[p.route]">{{ p.label }}</a>
</div>
<div class="subbmenu" *ngIf="p.childs?.length">
    <div class="subbmenu__wrapper" *ngFor="let item of p.childs">
    <div class="subbmenu__icon">
        <i class="fa icon gray-icon" [ngClass]="[item.icon]"></i>
    </div>
    <a [routerLink]="[p.route + '/' + item.route]">{{item.label}}</a>
    </div>
</div>
</div>

The essence of the problem is as follows:
When we hover over a menu item, we have a second menu, there we click on the link and everything goes fine
. But if we click on the second link (in the same submenu), the address in the line will be replaced, but the transition will not. You have to click on the parent and from there to the second link

Answer 1

It's hard to say that without knowing what you have in the routes and what happens in the component. must be dragged to stackblitz