为什么我的路由器导航功能在 angular 8 中不起作用？

Question

我正在尝试像这样重定向到另一个组件：

主页组件

  checkUrl(reference) {   
    if (reference != this.ref) {
      this.router.navigate(['/еrror']);
    }
  }

这是我的路由器模块

const routes: Routes = [
  { path: '', component: DefaultComponent },
  {
    path: '',
    children: [
      { path: ':dlr/:id/:ref', component: HomeComponent },
      { path: 'error', component: ErrorPageComponent },
    ]
  },
  { path: '**', redirectTo: '', pathMatch: 'full' }

];

现在我在 HomeComponent 中，想转到错误页面。

this.router.navigate(['/еrror']) 这导致我进入 DefaultComponent

Answer 1

 this.router.navigate(['/error'], { relativeTo: this.activatedRoute });

添加 relativeTo 它对我有用。

Answer 2

向先前删除的答案添加详细信息 -

因为它是 child 到 child 的导航，您可以尝试添加 relativeTo: this.activatedRoute 标签。您可以在文档中的 relativeTo 此处找到有关其语法和用法的更多信息。这基本上类似于我们在尝试指定文件路径时通常用于导航的“../”类型的符号。

因此，您可以尝试这样的操作 - this.router.navigate(['/еrror'], {relativeTo: this.activatedRoute});.

此外，这里要注意的一件事是，如果您将使用 ['еrror'] 而不是这个 ['/error']，导航可能会有所不同。例如，如果您当前在这里 - parent/abc/c1（其中 c1 是 child 组件）并且您使用 ['error']（其中 'error' 是 child 组件与 c1 相同 parent），URI 将变为 parent/abc/c1/error，而如果您将使用 ['/error']，您将首先向上移动一级 parent/abc/，然后是另一个 child 将添加 - parent/abc/error.

这里还描述了其他一些方法 - 除了我上面描述的方法，请看一看。希望这有帮助。

为什么我的路由器导航功能在 angular 8 中不起作用？

Why my router navigate function doesn't work in angular 8?

angular

angular-ui-router

angular2-routing

angular8

router