angular2-routing - Angular2 路由 : How to navigate to a child view from a service instead of routerLink?

标签 angular2-routing

尝试使用组件中的路由器对象通过代码导航到 subview 时遇到问题:

this.router.navigate(['./details']); //Error: Cannot match any routes: 'details'

但在我使用 routerLink 的模板中,它有效: 考验我 我需要做同样的事情,但在组件内使用 router.navigate 方法。我的组件显示在 routerOutlet 的另一个组件中,我有以下子路由配置:

export const HOME_ROUTES: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [{path: '',outlet: 'route1',component: DashboardComponent,pathMatch: 'full'},
    {
        path: 'dashboard',
        outlet: 'route1',
        component: DashboardComponent
    },
    {
        path: 'tasks',
        outlet: 'route1',
        component: TasksComponent,
        children: [
            { path: '',component: TasksListComponent,pathMatch: 'full'},
            { path: 'list',component: TasksListComponent},
            { path: 'details', component: TasksDetailsComponent },
            { path: 'view', component: TasksListComponent },
        ]
      }
    ]
  }
];

我正在尝试显示 TasksListComponent 中的 TasksDetailsComponent,我的相对 URL 是“http://localhost:8000/home/(route1:tasks)

非常感谢任何帮助 非常感谢

最佳答案

首先

import { ActivatedRoute } from '@angular/router';

然后在你的组件中

constructor(private route: ActivatedRoute) {}

然后

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

关于angular2-routing - Angular2 路由 : How to navigate to a child view from a service instead of routerLink?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41991647/

相关文章:

angular - 将数据绑定(bind)到 Angular 2 路由组件

Angular 2 : How to read a lazy-loaded Module's routes from within a Component

javascript - 如何修复由以下原因引起的 : Error in app/app. component.html:15:1:没有 RouterOutletMap 提供程序

html - Angular Material 2 : Sidenav has no backdrop

Angular 2 路由器路径

angular2 路由类型错误 : Cannot read property 'forRoot'

Angular 导航到具有不同参数的相同路线

javascript - Angular 2 中的哈希定位策略

angular - 如何导航到 Angular2 中的确切 url 字符串

javascript - Angular 2 : How to apply a callback when I leave a route