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

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>

每次我点击父项时，它都会导航到相应的链接，但是在点击任何子项而不是相应的子链接时，它会导航到父＆lt; li＆gt;作为整个孩子的路线＆lt; ul＆gt;是这个父母的一部分＆lt; li＆gt; 如何在这种嵌套的情况下阻止此父routerLink？ 请帮助你。

Answer 1

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

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