如何防止 parent routerLink 覆盖 child

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>

每次我点击 parent 项目时，它都会导航到相应的 link，但是点击任何 child 项目，而不是相应的 child link，它导航到 parent

路由，因为整个 child

的一部分在这种嵌套情况下，如何防止这个 parent routerLink？感谢您的帮助。

Answer 1

当你点击一个子元素时，它也会触发所有父元素的点击事件。由于它们运行按顺序排列，最外面的 "wins" 在导航的情况下。

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

如何防止 parent routerLink 覆盖 child

How to prevent overriding of parent routerLink over child

angular-ui-router

angular2-routing