Angular 5 trigger navigation on parent router-outlet from child outlet

Question

I have a series of Angular components in the structure as follows.

• RootComponent --> Contains router-outlet
  • Child component -> contains router-outlet
    • Grand child component -> Contains a button to trigger a navigation back to the root component

My question is from a routerLink on a button in the grandchild component how do I navigate to the rootcomponent?

app-routes

const routes: Routes = [
  {
    path: '',
    redirectTo: environment.devRedirect,
    pathMatch: 'full',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'customers/:customerId/contracts/:contractId',
    canActivate: [AuthenticationGuard],
    children: [
      {
        path: 'projects/:projectId/grouping',
        loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule',
        data: { animation: 'grouping' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: '',
        loadChildren: './projects/projects-routing.module#ProjectOverviewRoutingModule',
        data: {
          animation: 'project-overview'
        },
        canActivate: [ AuthenticationGuard ],
      },
    ]
  }
];

child component routes

const routes: Routes = [
  {
    path: '',
    component: GroupingComponent,
    canActivate: [ AuthenticationGuard ],
    children: [
      {
        path: 'create',
        component: CreateEditComponent,
        data: { animation: 'create' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: ':groupId/edit',
        component: CreateEditComponent,
        data: { animation: 'edit' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: '',
        component: OverviewComponent,
        data: { animation: 'overview' },
        canActivate: [ AuthenticationGuard ]
      }
    ]
  }

];

Answer 1

You can simply navigate to the root from the grandchild using regular routerLink like this:

<!-- grandchild.component.html --!>
<a [routerLink]="['/']">back to root</a>

Answer 2

You could get the customerId and contractId params from the activated route, which you could inject to the component as following:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'my-component',
  template: `
    <a [routerLink]="['/customers', customerId, 'contracts', contractId]">back to root</a>
  `
})
export class MyComponent implements OnInit {
  costumerId: string;
  contractId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    const params = this.route.snapshot.params;

    this.costumerId = params['costumerId'];
    this.contractId = params['contractId'];
  }
}

Answer 3

What you need to do is to use ActivatedRoute first :

constructor(private route : ActivatedRoute,
            private router: Router){}

routeSubscription : Subscription ;
customerId : number ;

ngOnInit(){

    this.getRouteParams();


}

getRouteParams(){

    this.routeSubscription = this.route.params
        .subscribe(
            (route)=>{
                console.log(route);
                this.customerId = route.customerId ;
            });
}
}

then route in routeSubscription will give you whatever route param you have in your route(for example console.log(route.customerId) to check ). then you can navigate using an instance of Router like :

navigate(){
this.router.navigate(['customers' + this.customerId]);
}

and in your html code use :

<a (click)="navigate()"></a>