Question

下面的路由工作正常，但是我想从组件而不是HTML处理相同的功能。

我该怎么办？

HTML

<a [routerLink]="[ '..', card.item ]">VIEW MORE</a>

Answer 1

您可以使用Router

    import { Router } from '@angular/router';
    constructor(
        private router: Router,
    ) {}

   navigateTo(card){
       this.router.navigate([ '..', card.item ]);
   }

Answer 2

尝试此操作以进行相对导航：

constructor(private route: ActivatedRoute, private router: Router) {}

moveTo() {
  this.router.navigate(['..', card.item], { relativeTo: this.route });
}

并在html中添加点击方法

<a (click)="moveTo()">VIEW MORE</a>

Answer 3

您可以创建导航共享服务：

import {Injectable} from '@angular/core';
import {Router} from '@angular/router';

@Injectable()
export class NavigationService {
  constructor(private router: Router) {
  }

  public goToProduct(productId: number): void {
    this.router.navigate(['..', productId]);
  }
}

如何从组件配置routerLink

3 个答案: