如何在 Angular 中嵌套 routerLink

Posted 2023-02-22

【中文标题】如何在 Angular 中嵌套 routerLink

【英文标题】：How to have nested routerLink in Angular

【发布时间】：2019-04-08 09:02:13

【问题描述】：

我有一个 Angular 7 的项目

我有带有<a> 标记的路由器链接，并且我有嵌套的<a> 标记，它们都具有routerLink 属性，

我面临的问题是，内部<a> 路由不起作用

<a [routerLink]="[ './comp1']">
    Comp1
    <a [routerLink]="['./comp2']">
        Navigate to comp2 (Nested)
    </a>
</a>

如果我把它分开，它就可以工作

<div>
    <a [routerLink]="['./comp2']">
        Navigate to comp2 (Not Nested)
    </a>
</div>

我也试过下面的代码，还是一样

<a [routerLink]="[ './comp1']">
    Comp1
    <a [routerLink]="['./comp2']" (click)="$event.preventDefault()>
        Navigate to comp2 (Nested)
    </a>
</a>

将a 标签更改为 span 也不能解决问题

<span [routerLink]="[ './comp1']" >
    Comp1
    <span [routerLink]="['./comp2']" (click)="$event.preventDefault()">
        Navigate to comp2 (Nested)
    </span>
</span>

这里是https://stackblitz.com/edit/angular-nested-router

【问题讨论】：

有趣。我猜嵌套这些会导致它们重叠，所以外部（A）覆盖B。但是不确定

我想知道这是否是一个事件传播问题，它触发重定向到comp2，然后立即触发重定向到comp1？编译时它没有使用本机浏览器导航，它全部包含在事件中。

但是你为什么要这样做呢？

@Roj 也许像点击外部会带你到一个集合，点击内部会带你到特定的一个？

@Zze 但您不需要嵌套链接。此外，您首先不能让嵌套链接工作。如果这是一种视觉思维，那么只需制作一个ul 并相应地设置样式，不是吗？

【参考方案1】：

在您的 stackblitz 中，将以下函数添加到您的组件类中。它接收事件作为参数并在其上调用stopPropagation 函数。

import  Component  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  name = 'Angular';

  stop(event: Event) 
    event.stopPropagation();
  

在你的模板中做

<router-outlet></router-outlet>
<a routerLink="/comp1">
  Comp1
  <a routerLink="/comp2" (click)="stop($event)">
    Navigate to comp2 (Nested)
  </a>
</a>

查看我的stackblitz 分叉。

【讨论】：

谢谢，我已经很接近解决方案了；）我尝试了(click)="$event.preventDefault()"，但没有成功