代码之家 › 专栏 › 技术社区 › Reza

如何在Angular中嵌套routerLink

angular7 angular2-routing angular javascript

1

Reza · 技术社区 · 6 年前

我有路由器链接 <a> 标记,我已经嵌套了 <a> 两个都有 routerLink 财产,

我面临的问题是,内心 < 路线不起作用

<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 为了它

1 回复 | 直到 5 年前

1

8

Felix Lemke 6 年前

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 叉子。