如何在 Angular 中嵌套 routerLink

Question

我在 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

Answer 1

在您的 stackblitz 中，将以下函数添加到您的组件 class。它接收事件作为参数并对其调用 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 叉子。

如何在 Angular 中嵌套 routerLink

How to have nested routerLink in Angular

javascript

angular2-routing

angular

angular7