如何在Angular中嵌套routerLink

Question

我有一个关于Angle 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 [routerLink]="[ './comp1']" >
    Comp1
    <span [routerLink]="['./comp2']" (click)="$event.preventDefault()">
        Navigate to comp2 (Nested)
    </span>
</span>

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

Answer 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前叉。