Angular 7 router navigate can not route to child compoent

Question

I do a web application project with angular 7. I faced a problem, that router navigate can not route to child component with this.router.navigate([/home/fetch-data]).

import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { CounterComponent } from './counter/counter.component';
import { HomeComponent } from './components/home/home.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: { bc: "NAVI.HOME" },
    children: [
      {
        path: 'fetch-data',
        component: FetchDataComponent,
        data: { bc: "VEHICLE.DETAILS" }
      }
    ]
  },
  {
    path: 'counter',
    component: CounterComponent,
    data: { bc: "Counter" }
  },
  // {
  // path: 'home/fetch-data',
  // component: FetchDataComponent,
  // data: { bc: "Home > Counter" }
  // },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];
@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes),
    CommonModule,
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

and the search component will trigger a function:

public naviTo(): void {
    this.vehicleService.getVehicleByVin(this.vehicle.vin);
    this.router.navigate(['../../home/fetch-data']);
    this.messageService.sendMessage("VehicleData");
  }

and app.component.html

<mat-sidenav-container class="mat-sidenav-container" autosize>
  <mat-sidenav mode="side" class="mat-sidenav" opened>
    <app-side-nav></app-side-nav>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="app-header">
      <app-header></app-header>
    </div>
    <div class="mat-sidenav-content">
      <main class="content">
        <app-breadcrumb></app-breadcrumb>
        <router-outlet></router-outlet>
      </main>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

That are all relevant code. the function naviTo() is in search.component and this search component is child component for header component. the home.component is navigated by side navi.

form the definition of rotuers, man can understand that fetch-data component is a child component of home, but it is not a real parent-child relationship in implementation.

The problem is that it will not be routed to the child Compoent with the function naviTo(). I have tried many possibilities, but it did not work. maybe I have passed something.

Any Solutions?

Best regards,

Leo

TheParam TheParam · Accepted Answer · 2019-03-05T13:53:49

Here you just need to ./ for relative to home component(parent).

Solution:

 public naviTo(): void {
    this.vehicleService.getVehicleByVin(this.vehicle.vin);
    this.router.navigate(['./fetch-data']);
    this.messageService.sendMessage("VehicleData");
  }

Hope this help!

Angular 7 router navigate can not route to child compoent

1 Answers