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

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>

每次我单击父项时，它都会导航到相应的链接，但是单击任何子项而不是相应的子链接时，它会导航到父

路由，因为整个子

是该父在这种嵌套情况下，如何防止此父路由器链接？ 感谢您的帮助。

Answer 1

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

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