為什么我的路由器導航 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以及我上面描述的方法，看看它。 希望這可以幫助。