导航到 angular 2 中其他组件中定义的子路径

Question

在我的应用程序中，我们在 app.component.ts 文件中创建了路由，如下所示。

@RouteConfig([
    { path: '/dashboard/...', name: 'Dashboard', component: DashboardComponent },
    { path: '/home', name: 'Home', component: HomeComponent },
])

并在仪表板组件中为收件箱、存档等仪表板中的子页面创建路由

@RouteConfig([
    {path:'/inbox', name: 'Inbox', component: InboxComponent, useAsDefault: true},
    {path:'/outbox', name: 'Outbox', component: OutboxComponent},
    {path:'/profile', name: 'MyProfile', component: MyProfileComponent}
])

现在我已经创建了 header 仪表板中常见的组件。我正在尝试从 header 组件导航到 'dathboard/profile'

我试过了

this.router.navigate(['Dashboard/MyProfile']);

但这只是在浏览器 URL 框中更改 URL 而不是重定向到组件。

我是 angular 2 的新手。需要帮助解决此导航问题。

Answer 1

这应该可以满足您的要求：

this.router.navigate(['/ Dashboard', 'MyProfile']);

确保 ROUTER_PROVIDERS 仅在根组件中添加一次（或者在 bootstrap().

中添加一次

导航到 angular 2 中其他组件中定义的子路径

navigate to subroute defined in other component in angular 2

typescript

angular

angular2-routing