angular - 在 TypeScript 中调用 Angular 路由器

Question

我在这样的页面中有一个按钮:

<button [routerLink]="['../edit', 14]">Test</button>

因此，如果我在 http://localhost/dashboard 并单击按钮，我将被重定向到 http://localhost/dashboard/edit/14，这正是我所期望的。

现在我需要在 Typescript 中做同样的事情。我在我的类(class)中注入(inject)了 Router 服务并尝试了以下操作:

this.router.navigate([`../edit/${item.id}`]);

this.router.navigate([`/edit/${item.id}`]);

this.router.navigate([`edit/${item.id}`]);

但没有一个工作，所有这些都将我重定向到我的起始页面，没有错误。

路由器是否需要一些额外的设置？

Answer 1

您需要指定您正在相对于当前路由进行路由。这是如何做到的:

@Component({...})
class ChildComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  go() {
    this.router.navigate([`../edit/${item.id}`], { relativeTo: this.route });
  }
}

这是 Docs描述 NavigationExtras 类的 relativeTo 属性