如何防止父路由器链接覆盖子路由器

Question

我在我的示例中嵌套了导航（路线）

<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>

每次我单击父项时，它都会导航到适当的链接，但是在单击任何子项时，它会导航到父 <li> 路由，而不是相应的子链接，因为整个子项 <ul> 是该父项的一部分<li> 在这种嵌套情况下，如何阻止此父 routerLink？感谢您的帮助。

Answer 1

当您单击子元素时，它也会触发所有父元素上的单击事件。由于它们按顺序运行，因此在导航的情况下，最外面的一个“获胜”。

添加(click)="$event.stopPropagation()"（或者如果您还需要在单击时运行其他逻辑，则在函数内部使用(click)="someFunction($event)"和调用）子元素以防止其冒泡。stopPropagation()