Как иметь вложенный routerLink в Angular - PullRequest
Новая
       24

Как иметь вложенный routerLink в Angular

0 голосов
/ 05 ноября 2018

У меня есть проект на угловых 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 для него

1 Ответ

0 голосов
/ 05 ноября 2018

В вашем стеке бликов добавьте следующую функцию в ваш класс компонентов. Он получает событие в качестве параметра и вызывает для него функцию 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>

См. Мой стек-блиц вилка.

...