How to prevent overriding of parent routerLink over child

I have nested navigation(routes) in my example

<ul>
    <li *ngFor="let route of routes" [routerLink]="route.link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        {{route.name}}</span>
        <!-- Secondary navigation (if exists) -->
        <ul *ngIf="route.children" class="secondary">
          <li *ngFor="let item of route.children" [routerLink]="item.link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
            {{item.name}}
          </li>
        </ul>
    </li>
</ul>

Every time I click on parent item, it navigates to the appropriate link, but on clicking any of the child item, instead of respective child link, it navigates to parent <li> routes as the whole child <ul> is part of this parent <li> How can I prevent this parent routerLink in such nested cases? Appriciate your help.