Question

我在从父级导航到子组件时遇到问题。

我的应用程序路由如下所示：

 const routes: Routes = [
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    },
    {
      path: 'parent',
      component: ParentComponent,
      children: [{
          path: 'child',
          component: ChildComponent
      }]
    },
    {
      path: '404',
      component: PageNotFoundComponent
    },
    {
      path: '**',
      redirectTo: '404'
    }
];

  @NgModule({
    imports: [
      RouterModule.forRoot(routes)
    ],
    providers: [{
        provide: APP_BASE_HREF,
        useValue: '/'
    }],
    exports: [
      RouterModule
    ],
  })

  export class AppRoutingModule {

  }

在父组件中，我将其调用为按钮点击导航到子项：

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

但我最终改为404页。

我在这里缺少什么？

Answer 1

试试这个

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

根据文档，你缺少两个点

您可以阅读here (Angular NavigationExtras)

Answer 2

检查我已使用您的路由配置重定向到子组件的this stackblitz POC

要从父级重定向，我使用以下代码 -

public showChild(): void {
    this._Router.navigate(['child'], {
    relativeTo: this._ActivatedRoute
  })
}

从根组件重定向。我使用了以下代码 -

public showChild(): void {
  this._Router.navigate(['parent', 'child'], {
    relativeTo: this._ActivatedRoute
  })
}

编辑 - 相对方法

要使用以下代码来使用相对路线 -

public showChild(): void {
    this._Router.navigate(['./child'], {
    relativeTo: this._ActivatedRoute
  })
}

因此，如果您想转到parent route's siblings child，来自/parent1/child的{{1}}我们会使用/parent

Angular router.navigate to child重定向到404 route

2 个答案: