为什么我的路由器导航 function 在 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中，想要 go 到错误页面。

this.router.navigate(['/еrror'])这将我带到DefaultComponent

Answer 1

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

添加relativeTo它对我有用。

Answer 2

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

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

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

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

这里还描述了其他一些方法——RouterNavigation以及我上面描述的方法，看看它。 希望这可以帮助。