title: How to prevent overriding of parent routerLink over child
body: <p>I have nested navigation(routes) in my example</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let route of routes" [routerLink]="route.link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"&gt;
          {{route.name}}&lt;/span&gt;
          &lt;!-- Secondary navigation (if exists) --&gt;
          &lt;ul *ngIf="route.children" class="secondary"&gt;
            &lt;li *ngFor="let item of route.children" [routerLink]="item.link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"&gt;
              {{item.name}}
            &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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 &lt;li&gt; routes as the whole child &lt;ul&gt; is part of this parent &lt;li&gt;
  How can I prevent this parent routerLink in such nested cases?
  Appriciate your help.</p>