如何从兄弟组件导航到Angular中的另一个兄弟组件?

时间:2018-03-26 08:37:40

标签: angular angular-routing

以下是我的app.routing.ts

export const Approute: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: 'trip-details',
        component: TripDetailsComponent
      }
    ]
  },
  { path: 'not-found', component : NotFoundComponent },
  { path: '**', redirectTo: '/not-found' }
 ];

component.ts

 viewDetails(details) {
     ...
    this.route.navigate(['../trip-details']);
  }

上面我有一个组件,我正在尝试导航到另一个兄弟组件,但我无法导航到http://localhost:4200/home/trip-details它将我重定向到http://localhost:4200/not-found

哪里出错?

3 个答案:

答案 0 :(得分:2)

您可以指定relativeTo哪条路线如下所示:

import {Router, ActivatedRoute } from '@angular/router';
constructor(private r: ActivatedRoute) { }

viewDetails(details) {
    ...
    this.route.navigate(['../trip-details'], { relativeTo: this.r });
  }

答案 1 :(得分:2)

你应该像这样导航:

this.route.navigate(['home', 'trip-details']);

或者,将行程详细信息在路线中移动一级以上,然后您可以使用

直接导航到它
this.route.navigate(['trip-details']);

答案 2 :(得分:2)

因为角网格无法找到../trip-details

的网址

您应该使用this.route.navigate(['/home/trip-details']);

Juse add' home'在网址前面